Javascript或jquery檢查是否將鼠標懸停在某個元素上

目標是當鼠標懸停時，有多個元素爲每個元素觸發特定的文本消息，如果兩個鼠標懸停都沒有文本消息。從其他問題我發現$("#id").is(":hover")應該返回true，如果鼠標在元素上，但它似乎並沒有做到這一點。他們都返回false且文本是「無」Javascript或jquery檢查是否將鼠標懸停在某個元素上

HTML：

<input class="r_check" type="checkbox" id="r1" name="rating" value="1"><label for="r1"></label> 
<input class="r_check" type="checkbox" id="r2" name="rating" value="2"><label for="r2"></label> 
<input class="r_check" type="checkbox" id="r3" name="rating" value="3"><label for="r3"></label> 

<p class="text" id="the_text"></p>

使用Javascript/jQuery的：

$(document).ready(function(){ 
var text = $("#the_text"); 

    if($("#r1").is(":hover")){ 
     text.html("Low"); 
    }else if($("#r2").is(":hover")){ 
     text.html("Medium"); 
    }else if($("#r3").is(":hover")){ 
     text.html("High"); 
    }else{ 
     text.html("None"); 
    } 

});

我試圖取代簡單<p id="r1">input 1</p>元素輸入字段，看是否標籤或輸入的類別阻止懸停事件，但這也不起作用。

來源

2017-04-26 ioan

您的問題可以在一個更整潔，更容易的方式編寫如下

Working JSFiddle

<input class="r_check" type="checkbox" id="r1" name="rating" value="1" data-text="Low"> 
<input class="r_check" type="checkbox" id="r2" name="rating" value="2" data-text="Medium"> 
<input class="r_check" type="checkbox" id="r3" name="rating" value="3" data-text="High"> 

<p class="text" id="the_text"></p> 

$(document).ready(function() { 
    $(".r_check").each(function() { 
    $(this) 
     .mouseover(function() { 
     $("#the_text").html($(this).attr('data-text')) 
     }) 
     .mouseleave(function() { 
     $("#the_text").html(''); 
     }); 
    }) 
});

來源

2017-04-26 23:56:41

謝謝！那工作。 – ioan

$("#id").on("mouseenter", function(e) { });

應該這樣做

來源

2017-04-26 23:14:57

你在做什麼是測試如果themouse超過它時，頁面加載只有一次，你應該是使用就會觸發這個事件做什麼，當鼠標是在你的輸入（或者使用jQuery的$('selector').hover(handlerIn,handlerOut)或$('selector').on("mouseenter,function() {});

（Here's the difference）

Working jsFiddle

來源

2017-04-26 23:28:36

Javascript或jquery檢查是否將鼠標懸停在某個元素上

回答

相關問題