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检查是否将鼠标悬停在某个元素上

回答

相关问题