使用悬停的元素，然后点击删除悬停效果，再次点击再次添加悬停 [英] Element with hover then click removes hover effect and click again adds hover again

问题描述

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

I am trying create a search word puzzle box with JQuery. Basically a table with an alphabet in each cell and the user needs to find and mark the words in the grid by clicking the table cells. So I am trying to combine the clicks and hover events the following way:

当鼠标结束时，所有单元格都应具有悬停高亮效果，除非它已被点击。如果点击它，它应该只是更改为不同的颜色标记活动选择，以便悬停效果被删除。再次单击所选单元格时，它应该回到其添加了悬停高亮效果的原始状态。进一步的点击只会重复上述切换。

All cells should have a hover highlight effect when the mouse is over except when it was already clicked. If it was clicked then it should just change to a different color to mark active selection so the hover effect is removed. Upon clicking again the selected cell it should revert back to its original state with the hover highlight effect added. Further clicks would just repeat the above mentioned toggle.

如何实现？我试过下面的unbind（），bind（）选项，但它不工作。感谢，阿提拉

How is it possible? I have tried the following with unbind(), bind() option but it didn't work. Thanks, 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')
       }
   );
});

推荐答案

我会通过绑定两个事件来完成：点击和悬停。每一个都有自己的逻辑来工作，并独立于彼此操作。此外，因为你想要做的只是效果化妆品的更改，你可以通过添加/删除CSS类，而不是直接更新CSS（即使用内联样式）。

I would do it all by binding two events: the click and the hover. Each of these would have their own logic to work out and would operate independently of one-another. Further, since all you want to do is effect cosmetic changes, you could do it by adding/removing CSS classes rather than updating the CSS directly (ie. with inline styles).

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

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

Sample function (classes and colours not taken from your sample code):

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

这篇关于使用悬停的元素，然后点击删除悬停效果，再次点击再次添加悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！