javascript - .is(":hover") 的替代方案？在 Opera 中不起作用

Question

见http://jsfiddle.net/cgWdF/3/

在所有浏览器中都能正常工作*，最新的 Opera 除外。

*未在 IE9 以下测试

应该指定，它需要返回真或假，我没有用它来绑定事件。

Answer 1

jQuery.hover在 Opera 12 中的作品。

var $sample = $("#sample");
$sample.hover(function() {
   $sample.css("background", "yellow");
}, function() {
    $sample.css("background", "");
});

小提琴

或者，.data用于存储悬停状态并对其进行测试（类似于您原来的小提琴）：

var $sample = $("#sample");
$sample.hover(function() {
   $(this).data('hovering', true);
}, function() {
   $(this).data('hovering', false);
});

setInterval(function(){
    var $sample = $("#sample");
    if($sample.data('hovering')) {
       $sample.css("background", "yellow");
    }
    else {
       $sample.css("background", "");
    }
}, 200);

小提琴

Answer 2

您可以使用 .mouseover() 和 .mouseout() 来达到相同的效果。如果你想延迟动画，你可以在 jQuery UI 中使用 .animate()

$('#sample').mouseover(
        function() {
            $(this).stop().animate({
                backgroundColor: "yellow"}, 200);
        });

$('#sample').mouseout(
        function() {
            $(this).stop().animate({
                backgroundColor: "#aaa"}, 200);
        });

http://jsfiddle.net/cgWdF/8/

Answer 3

从 jQuery 1.9.1 开始，其他浏览器已经赶上了 Opera——它现在也不再在那里工作了。正如您的小提琴所调查的那样，“它”是.is（“：悬停”）。

我为 .is(":hover") 写了一个解决方法，参见小提琴http://jsfiddle.net/mathheadinclouds/BxL4w/

function mouseIsOver(what){
    return $(what).is(":hover");
}
function mouseIsOverWorkaround(what){
    var temp = $(what).parent().find(":hover");
    return temp.length == 1 && temp[0] == what;
}
function mo(what){
    return document.getElementById("workaround").checked ? mouseIsOverWorkaround(what) : mouseIsOver(what);
}
setInterval(function(){
    var theBox = $("#theBox");
    if(mo(theBox[0])) {
       theBox.css("background", "yellow");
    } else {
       theBox.css("background", "");
    }
}, 200);

和html

<input type="checkbox" id="workaround"/>
<div id="theBox"></div>