具有悬停的元素然后单击会删除悬停效果，再次单击会再次添加悬停效果

Question

我正在尝试使用 JQuery 创建一个搜索词拼图框。基本上是一个每个单元格中都有字母表的表格，用户需要通过单击表格单元格来查找并标记网格中的单词。因此，我尝试按以下方式组合单击和悬停事件：

当鼠标悬停时，所有单元格都应具有悬停突出显示效果，除非已经单击了鼠标。如果单击它，那么它应该更改为不同的颜色来标记活动选择，以便删除悬停效果。再次单击所选单元格后，它应该恢复到原始状态，并添加悬停突出显示效果。进一步的点击只会重复上述切换。

怎么可能呢？我已经尝试使用 unbind()、bind() 选项执行以下操作，但它不起作用。谢谢，阿提拉

$("#puzzleTable td").each(function(){
$(this).hover(
   function(){
       $(this).css("background-color", "#FF6633");
   },
   function() {
       $(this).css("background-color", "#99CC00");
   }).toggle(
       function(){
       $(this).unbind('mouseenter mouseleave'),
       $(this).css("background-color", "#006699")
       },
       function(){      
       $(this).css("background-color", "#99CC00"),              
       $(this).bind('mouseenter mouseleave')
       }
   );
});

Answer 1

我将通过绑定两个事件来完成这一切：单击和悬停。其中每一项都有自己的逻辑，并且彼此独立运作。此外，由于您想要做的只是实现外观更改，因此您可以通过添加/删除 CSS 类来完成，而不是直接更新 CSS（即使用内联样式）。

这是一个小提琴： http://jsfiddle.net/VCf3E/

示例函数（类和颜色不是从您的示例代码）：

$('table td')
    .hover(
   function(){
       $(this).addClass('hover');
   },
   function() {
       $(this).removeClass('hover');
   })
    .click(
    function() {
       $(this).toggleClass('active');
});

Answer 2

您的代码在重新绑定 mouseenter 和 mouseleave 事件时未指定事件处理程序。但是，如果您使用 CSS 类来应用样式，则根本不必取消绑定并重新绑定鼠标事件。只需定义“单击”状态规则，使其覆盖“悬停”状态规则即可。这非常简单，特别是如果您不需要支持 IE6（IE6 解决方案也包含在下面）：

CSS 样式：

td {
    background-color: #99CC00;
}

td:hover {
    background-color: #FF6633;
}

td.clicked, td.clicked:hover {
    background-color: #006699;
}

Javascript：

$("#puzzleTable td").click(function () { $(this).toggleClass('clicked'); });

---

如果您需要支持 IE6，它会变得有点复杂（因为 IE6 只支持 :hover 在锚元素上）：

CSS：

td {
    background-color: #99CC00;
}

td.hover {
    background-color: #FF6633;
}

td.clicked {
    background-color: #006699;
}

Javascript：

var cells = $('#puzzleTable td');
cells.bind('mouseenter mouseleave', function() { $(this).toggleClass('hover'); });
cells.click(function() { $(this).toggleClass('clicked'); });