元素与悬停，然后单击删除悬停效果，然后再次单击添加悬停

Question

我想创建一个与JQuery搜索字拼图盒。基本上每个单元格中都有一个字母表，用户需要通过单击表格单元来查找和标记网格中的单词。所以我试图按照以下方式将点击和悬停事件组合在一起：

所有单元格在鼠标移除时都应该有悬停高亮效果，除非它已被点击。如果它被点击，那么它应该改变为不同的颜色来标记活动选择，以便悬停效果被移除。再次单击所选单元格后，应该恢复到其原始状态并添加悬停高亮效果。进一步的点击只会重复上面提到的切换。

这怎么可能？我已经尝试了以下与unbind（），bind（）选项，但它没有工作。谢谢，Attila

$("#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'); });