Question

说明

作为我上一个问题的延续（或者可能是重新描述），我试图检测光标是否在先前隐藏的，现在已淡入的元素上，而实际上没有移动光标来执行此操作。

这是设置：当一个元素在其下方淡入时，将鼠标保持完全静止。淡入动画完成后，脚本应该检测到新显示的元素实际上位于光标下方，然后通过jQuery.trigger()或其他一些事件触发鼠标事件。

在下面提供的小提琴中，红色框仅表示应放置光标的位置;否则不会被利用。也许最重要的是，我想知道是否有可能完成此任务而不跟踪鼠标坐标。

小提琴：

代码：

setTimeout(function() {

    //Fades in the element
    $('#kitty').fadeIn('slow', function() {

        //This verifies that the element exists
        if ($('#kitty').length != 0) {

          //Do something to detect that #kitty is underneath the mouse cursor

        }

    });

}, 3000);

$('#kitty').mouseenter(function() {
    $(this).css({
        'transform': 'scale(1.5)',
        'transition': 'transform 500ms'
    });
}).mouseleave(function() {
    $(this).css({
        'transform': 'scale(1)',
        'transition': 'transform 500ms'
    });
});

Answer 1

这样的事情怎么样？

基本上，您要在要检查鼠标悬停的元素上设置数据参数，然后在检查时查看该参数。

http://jsfiddle.net/6xw8Z/8/

setTimeout(function() {
    $('#kitty').fadeIn('slow', function() {
        if ($('#kitty').length != 0) {
          if($('#kitty').data("hovering") == "yes")
          {
              //Take whatever your intended action is
              alert("hovering");
          }
        }
    });
}, 3000);

$('#kitty').mouseenter(function() {
    $(this).css({
        'transform': 'scale(1.5)',
        'transition': 'transform 500ms'
    });

    //Set the data parameter
    $(this).data("hovering","yes");

}).mouseleave(function() {
    $(this).css({
        'transform': 'scale(1)',
        'transition': 'transform 500ms'
    });

    //Unset the parameter when the mouse leaves
    $(this).data("hovering","");
});

检测固定光标是否悬停在先前隐藏的，现在可见的元素上

说明

小提琴：

代码：

1 个答案: