16

好的，所以我可以使用检测鼠标悬停.on('mouseover')

我可以使用检测按键

$(document).keypress(function(e) {
        console.log(e.which);
}

但是当我按下某个按钮时，如何检测鼠标悬停在哪个图像上？

这个想法是能够通过在将鼠标悬停在图像上时按 d 来删除图像。有任何想法吗 ？

4

5 回答 5

8

您只需切换一个类或数据属性，即可显示当前悬停的是哪个类或数据属性

$('img').hover(function(){
   $(this).toggleClass('active'); // if hovered then it has class active
});
$(document).keypress(function(e) {    
    if(e.which == 100){
       $('.active').remove(); // if d is pressed then remove active image
    }
});

FIDDLE

于 2013-08-07T16:17:45.760 回答
4

我使用 jsFiddle 添加了一个更好的示例：http: //jsfiddle.net/cUCGX/（将鼠标悬停在其中一个框上并按 Enter。）

给每个图像一个 on('mouseover') 并根据该图像设置一个变量。

所以

var activeImage = null;

myImage.on('mouseover', function() {
  activeImage = 'myImage';
});

myImage2.on('mouseover', function() {
  activeImage = 'myImage2';
});

$(document).keypress(function(e) {
  if (e.which == 'certainKeyPress'  && activeImage) {
    //do something with activeImage
    console.log('The cursor was over image: ' + activeImage + ' when the key was pressed');
  }
});

如果您希望按键仅在悬停时起作用，也许还可以为每个图像添加一个 onmouseout 以清除 activeImage。

于 2013-08-07T16:04:06.233 回答
2

您应该使用 mousemove 事件将 x & y 位置永久存储在全局变量中。

然后，在按键处理程序中，使用 document.elementFromPoint(x, y) 方法在最后一个已知的鼠标位置抓取元素。

请参阅https://developer.mozilla.org/en-US/docs/Web/API/document.elementFromPoint

于 2013-08-07T16:22:18.023 回答
2

当我在玩这个并且发现我更喜欢我的快速解决方案时，我将继续并删除它。它可能不是最好的，但它更适合我需要命名空间类型解决方案的需求，因为当 dom 处于某种状态（可排序）时，处理程序将被删除：

// Create handler for binding keyup/down based on keyCode
// (ctrl in this example) with namespace to change the cursor
var setCursorBindings = function() {
    $(document).on('keydown.sortable', function(event) {
        if (event.keyCode === 17) {
            $('body').css('cursor', 'pointer');
        }
    }).on('keyup.sortable', function(event) {
        if (event.keyCode === 17) {
            $('body').css('cursor', 'inherit');
        }
    });
};

// Create a handler for reverting the cursor 
// and remove the keydown and keyup bindings.
var clearCursorBindings = function() {
    $('body').css('cursor', 'inherit');
    $(document).off('keydown.sortable').off('keyup.sortable');
};

// Use the jQuery hover in/out to set and clear the cursor handlers
$('.myElementSelector').hover(function() {
    setCursorBindings();
}, function() {
    clearCursorBindings();
});

在 Chrome v41 中测试

于 2015-03-23T23:59:36.320 回答
1

使用它来测试鼠标是否在带有 id 的图像上img：

$('#img').is(":hover")
于 2013-09-17T22:40:55.580 回答