hover的元素然后单击删除hover效果并再次单击再次添加hover

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

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

这怎么可能？ 我用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

我会通过绑定两个事件来完成所有操作：点击和hover。 这些中的每一个都有自己的逻辑来运作，并且可以彼此独立地运行。 此外，由于您要做的只是改变化妆品的变化，您可以通过添加/删除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类来应用样式，则根本不需要取消绑定和重新绑定鼠标事件。 只需定义“点击”状态规则，以便它们覆盖“hover”状态规则。 这非常简单，特别是如果您不需要支持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'); });