javascript - 单击 JavaScript 中的自定义 CSS 按钮后恢复悬停状态？

Question

我有一个具有正常、按下和悬停状态的 CSS 按钮。一切正常，除了当点击发生时，我需要以某种方式知道样式应该设置为正常还是悬停。也就是说，我需要一种方法来了解鼠标光标是否仍在元素上悬停。如何使用 JavaScript 实现这一目标？

Answer 1

如果您担心用户执行 mousedown，然后将指针从按钮上移开(也许再次打开)，您可以这样做:

示例: http://jsfiddle.net/7zUaj/1/

var mouseIsDown = false; // Track/remember mouse up/down state for the button

    // Handle mouseenter and mouseleave
$('div').hover(function() {
    $(this).addClass('hover');
    if (mouseIsDown) 
        $(this).addClass('pressed'); // If mouse button was down, and user exited
                                     //   and reentered the button, add "pressed"
}, function() {
    $(this).removeClass('hover pressed');  // Remove both hover and pressed when
                                           //    the pointer leaves the button
})
  // Handle the mousedown, track that it is down, and add "pressed" class
.mousedown(function() {
    mouseIsDown = true;
    $(this).addClass('pressed');
})
 // Handle the mouseup, track that it is now up, and remove the "pressed" class
.mouseup(function() {
    mouseIsDown = false;
    $(this).removeClass('pressed');
});

 // If user does mousedown, leaves the button, and does mouseup,
 //     track that it is now up
$(document).mouseup(function() {
    mouseIsDown = false;
});​

鼠标的状态在变量中进行跟踪，并在 mousedown 和 mouseup 的按钮处理程序中设置。 mouseup 也在 document 级别进行跟踪。这将有助于 .hover() 的 mouseenter 部分了解它是否应该设置 pressed 类。

(请注意，因为 mouseup 也在 document 上被跟踪，如果页面上有任何其他元素阻止事件冒泡，mouseup 不会被 document 检测到。)

编辑:文档只跟踪mouseup，按钮跟踪两者。