Question

目标是让几个元素在鼠标悬停时为每个元素触发特定的文本消息，如果没有任何一个，则没有文本消息。从其他问题我发现，如果鼠标位于元素上，$("#id").is(":hover")应该返回true，但它似乎没有这样做。它们都返回false，文本为“None”

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>元素替换输入字段，以查看输入的标签或类是否阻止悬停事件，但这也不起作用。

Answer 1

您的问题可以用更简洁，更简单的方式编写，如下所示

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('');
      });
  })
});

Answer 2

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

应该这样做

Answer 3

你正在做的是在页面加载时测试一下是否只有一次，你应该做的是使用当鼠标在输入上时触发的事件（使用jquery的$('selector').hover(handlerIn,handlerOut)或者与$('selector').on("mouseenter,function() {} );

（Here's the difference）

Working jsFiddle

Javascript或Jquery检查是否将鼠标悬停在元素上

3 个答案: