带有悬停然后单击的元素删除悬停效果并再次单击再次添加悬停

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'); });