如何使用JQuery检查光标是否悬停在元素上

时间:2010-11-11 00:13:10

标签: javascript jquery

可以检查光标是否悬停在元素上。

这样的东西
 $("#divId").is("hover");

注意:我只想检查未设置事件。

5 个答案:

答案 0 :(得分:22)

.is(':hover');

$('#divId:hover');

答案 1 :(得分:4)

更新了答案!

$("#foo").hover(function() {
    $(this).data("hovered", true);
}, function() {
    $(this).data("hovered", false);
}); 

测试它是否悬停......

if ( $("#foo").data("hovered") ) {
    // it is hovered
} else {
    // it's not hovered
}

答案 2 :(得分:3)

您可以使用jQuery的 hover() mouseenter() mouseover()

$("#divId").hover(function() { alert("hovering"; });

这将触发mouseenter和mouseleave。您可以为每个事件添加单独的事件处理程序。

因此,如果您想要执行类似if hovering over #divId increase x by one, and when you stop hovering decrease y by one

的操作
$("#divId").hover(function() { ++x; }, 
                  function() { --y; });

如果你真的想要if hovering

var hovering = 0;
$("#divId").hover(function() { hovering = 1; },
                  function() { hovering = 0; });
...
// Then inside somewhere useful. Maybe in a setInterval, or triggered by
//    another action...
if (hovering) { ...

Try it out with this jsFiddle

例如:

$(function() {
    var hovering = 0;
    $("div").hover(function() { hovering = 1; },
                   function() { hovering = 0; });

    $(document).keyup(function() {
         if (hovering) alert("hovering!");     // This is the "if hovering"
         else          alert("not hovering.");
    });
});

答案 3 :(得分:2)

您可以使用.hover()。它可以像这样使用:

$("selector").hover(
    function (){
        //mouse over
    },
    function (){
       //mouse out
    }
);

从文档中使用它的一个例子是:

$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  }, 
  function () {
    $(this).find("span:last").remove();
  }
);

答案 4 :(得分:0)

根据您的工作情况,mouseover()http://api.jquery.com/mouseover/)或hover()http://api.jquery.com/hover/)可能会有用。