突出顯示懸停時整行

Question

我有一個javaScript函數，該函數通過可變數量的迭代循環，並將HTML吐到DOM / Webpage。 因此，在循環之后，它將填充以下div：

  <div class="energyRowContainer" id="energyRowContainer">

  </div>

像這樣...

<div class="energyRowContainer" id="energyRowContainer">

<div id="energyRow0" class="energyRow">
<div class="energyTypeHead"> 1.2.2012 </div><div class="energyUnitMWH"> 93 </div><div class="energyUnitT"> 174 </div><div class="energyUnitM3_1"> 6594 </div><div class="energyUnitM3_2"> 116 </div><div class="energyUnitM3_3"> 34162 </div><div class="energyUnitM3_4"> 2625 </div><div class="energyUnitM3_5"> 17886 </div> <div class="energyUnitM3_6"> 21 </div>
</div>

<div id="energyRow1" class="energyRow">
<div class="energyTypeHead"> 1.2.2012 </div><div class="energyUnitMWH"> 93 </div><div class="energyUnitT"> 174 </div><div class="energyUnitM3_1"> 6594 </div><div class="energyUnitM3_2"> 116 </div><div class="energyUnitM3_3"> 34162 </div><div class="energyUnitM3_4"> 2625 </div><div class="energyUnitM3_5"> 17886 </div> <div class="energyUnitM3_6"> 21 </div>
</div>

<div>

現在，我想使用Jquery或CSS更改整個行的背景顏色（class =“ energyRow”），但是僅創建一個energyRow：hover無效，因為我將鼠標懸停在子div上...我已經考慮過使用這種方法，但是我無處可去...有任何想法嗎？

$('#energyRowContainer > .energyRow, ').hover(function() {
    $(this).parent().toggleClass('name_of_a_hover_class');
});

Answer 1

我相信您的問題是，您是在動態向DOM中添加元素，而不是使用.delegate()這樣的事件委托綁定方法。 不過，這可以使用CSS來完成（這對性能有好處，盡管通過JS向元素添加類不會產生更多的開銷）：

#energyRowContainer .energyRow:hover {
    background : yellow;
}

這是一個演示： http : //jsfiddle.net/zNWGL/

而且，您是如此接近，您需要做的就是從選擇中刪除.parent() 。 這是沒有.parent()代碼演示： http : //jsfiddle.net/zNWGL/1/

Answer 2

這有幫助嗎？

$('#energyRowContainer').find('.energyRow').hover(function() {
    $(this).parent().addClass('name_of_a_hover_class'); // On hover
}, function() {
    $(this).parent().removeClass('name_of_a_hover_class'); // On not hover
});

不要忘記在div之后或准備好的事件中添加它。

Answer 3

代碼中的問題是您使用的是$(this).parent() ，它選擇要懸停在其上的元素的父級並在其上切換類。

您只需要使用$(this) ，它將指向您懸停在其上的容器並在其上切換類。

另外，由於元素是動態添加的，因此應在on使用delegate （在jQuery 1.7中添加）

使用delegate ：

$('#energyRowContainer').delegate('.energyRow', 'hover', function() {
    $(this).toggleClass('name_of_a_hover_class');
});

on使用：

$('#energyRowContainer').on('hover', '.energyRow', function() {
    $(this).toggleClass('name_of_a_hover_class');
});

但是，您可以通過像這樣的純CSS實現此行為。

.energyRow:hover {
    background : whateverColor;
}

• .delegate()參考- http://api.jquery.com/delegate/
• .on()參考- http://api.jquery.com/on/