在悬停上突出显示整行

我有一个javaScript函数，它循环执行可变数量的迭代并将HTML吐出到DOM /网页。因此，在循环后它填补以下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改变整个行的背景颜色（类=“energyRow”）然而，简单地创建一个energyRow：悬停不起作用，因为我徘徊在孩子divs ...我想过使用这样的，但我没有得到任何地方...任何想法任何人？

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

来源

2012-02-18 Mike Sav

似乎没有在这里工作......有些事情是不正确的？嗯... – 2012-02-18 17:01:36

我相信你的问题是你动态地将元素添加到DOM，但不使用.delegate()等事件委托绑定方法。这可以用CSS虽然做（这将是很好的表现，虽然加入了类通过JS元素不产生更多的开销）：

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

这里是一个演示：http://jsfiddle.net/zNWGL/

此外，您非常亲密，您只需从您的选择中删除.parent()。这里是你的代码SAN的.parent()的演示：http://jsfiddle.net/zNWGL/1/

来源

2012-02-18 16:54:51 Jasper

仍然没有工作的东西真的很奇怪... – 2012-02-18 17:26:59

@MikeSav你能发布一个链接到你正在使用的代码吗？ – Jasper 2012-02-18 17:27:43

这有帮助吗？

$('#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或你准备好的事件后添加这个。

来源

2012-02-18 16:54:47 Fox32

的问题在你的代码是，你正在使用$(this).parent()这是选择你徘徊在元素的父并在其上切换的类。

您只需要使用$(this)，它将指向您徘徊的容器并在其上切换课程。

此外，由于元素被动态地添加你应该使用delegate上on

（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/

来源

2012-02-18 16:55:27 ShankarSangoli

在悬停上突出显示整行

回答

相关问题