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