CODEWITHSUNDEEP
jqueryhtmlcss
Mike Sav
Mike Sav

Reputation: 15291

Highlight whole row on hover

I have a javaScript function that loops through a variable number of iterations and spits HTML to the DOM / Webpage. Thus after the loop it fills the following div:

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

  </div>

like so...

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

now I'd like to use Jquery or CSS to change the background color of the whole row (class="energyRow") however simply creating a energyRow:hover doesn't work as I'm hovering over the child divs... I've thought about using like this but I"m getting nowhere... any ideas anyone?

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

Upvotes: 0

Views: 2787

Answers (3)

ShankarSangoli
ShankarSangoli

Reputation: 69905

The issue in your code is that you are using $(this).parent() which is selecting the parent of the element you hovered on and toggling the class on it.

You just have to use $(this), it will point to the container you hovered on and toggle class on it.

Also since the elements are added dynamically you should use delegate on on(added in jQuery 1.7)

Using delegate:

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

Using on:

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

However you can achieve this behavior through pure css like this.

.energyRow:hover {
    background : whateverColor;
}

Upvotes: 0

Jasper
Jasper

Reputation: 76003

I believe your issue was that you were adding the elements to the DOM dynamically but not using event delegation binding methods like .delegate(). This can be done with CSS though (which will be good for performance, although adding a class to an element via JS doesn't create much more overhead):

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

Here is a demo: http://jsfiddle.net/zNWGL/

Also, you were so close, all you needed to do was remove the .parent() from your selection. Here is a demo of your code sans the .parent(): http://jsfiddle.net/zNWGL/1/

Upvotes: 3

Fox32
Fox32

Reputation: 13560

Does this help?

$('#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
});

Don't forget to add this after you div's or in your ready event.

Upvotes: 0

Related Questions