jQuery：使用mouseover和mouseout与toggleClass结合使用

Question

我正在构建一个小型Web应用程序，其中有一些可点击的区域和一些不可点击的区域。当用户的鼠标指针位于可点击区域时，该区域将突出显示，指针变为一只手。我也有一些最初不可点击的区域，然后一旦点击按钮就会变成可点击的，反之亦然。我在这些区域使用了toggleClass方法。但我似乎无法在这些特定领域使用mouseover和mouseout方法。

当我点击按钮时，我想要将指针悬停在显示答案和提交选项卡上并在再次单击时将鼠标指针以及背景颜色更改，然后再次将其恢复为默认值state.Right现在，我只能改变指针。

HTML

<div id="help" class="hover">Help</div> 
<div id="switchplayer" class="hover">Switch to Two player</div> 
<div id="showanswer">Show Answer</div> 
<div id="submit">Submit</div> 
<div id="start" class="hover">Start</div> 

<button>Click me!</button> 

jQuery的 $（ '按钮'）点击（函数（）{ $（ '＃showanswer，＃提交'）toggleClass（ '悬停'）。; }）;

$('.hover').mouseover(function() { 
    $(this).css('background-color','red'); 
}).mouseout(function() { 
     $(this).css('background-color',''); 
}); 

CSS

div { 
border:1px solid black; 
} 

.hover { 
    cursor:pointer; 
    cursor:hand; 
} 

Answer 1

你可以用这个简单的CSS做到这一点：

.hover:hover { 
    background-color: red; 
} 

http://jsfiddle.net/cT3M9/3/

然后按预期它会工作。

然而，如果你需要的JavaScript完成这个任务，你应该使用on委派事件：

$(document).on({ 
    mouseover: function() { 
     $(this).css('background-color','red'); 
    }, 
    mouseout: function() { 
     $(this).css('background-color', ''); 
    } 
}, '.hover'); 

http://jsfiddle.net/cT3M9/6/

Answer 2

由于dfsq指出，要做到这一点最简单的方法是简单的通过CSS。但是，代码不起作用的原因是mouseover和mouseout方法仅适用于执行时执行这些方法的hover类的元素。这些事件符号是而不是追溯附加到符合原始选择标准的新元素。要应用事件处理程序代码晚些时候获得该类元素，使用.on method的变化，像这样：

$('body').on('mouseover', '.hover', function() { 
    $(this).css('background-color','red'); 
}).on('mouseout', '.hover', function() { 
    $(this).css('background-color',''); 
});