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

Question

目标是让多个元素在鼠标悬停在其上时为每个元素触发特定的文本消息，如果没有任何元素悬停在其上则没有文本。从其他问题中，我发现如果鼠标悬停在元素上，$("#id").is(":hover") 应该 return 为真，但它似乎并没有这样做。它们都是 return 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> 元素替换输入字段，以查看输入的标签或 class 是否阻止了悬停事件，但这也没有用。

Answer 1

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

应该这样做

Answer 2

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

(Here's the difference)

Working jsFiddle

Answer 3

你的问题可以写得更简洁更容易，如下所示

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

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

Javascript or Jquery check if hovering over an element

javascript

jquery

hover

jquery-hover

onhover