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

Posted 2023-05-08

【中文标题】Javascript 或 Jquery 检查是不是将鼠标悬停在元素上

【英文标题】：Javascript or Jquery check if hovering over an elementJavascript 或 Jquery 检查是否将鼠标悬停在元素上

【发布时间】：2017-09-24 13:17:54

【问题描述】：

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

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

【参考方案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('');
      );
  )
);

【参考方案2】：

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

应该这样做

【参考方案3】：

您正在做的是在页面加载时测试鼠标是否只在它上面一次，您应该做的是使用当鼠标悬停在您的输入上时触发的事件（使用 jquery 的 $('selector').hover(handlerIn,handlerOut) 或 @ 987654324@;

(Here's the difference)

Working jsFiddle