Hover over the entire row to see it light up

Question

Hover over the entire row to see it light up

I am trying to create a JavaScript function that loops through a variable number of iterations and dynamically generates HTML elements on the DOM / Webpage. Once the loop is complete, it populates the following div:

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

  </div>

The generated content looks like this:

<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 am looking for a way to change the background color of the entire row (with class="energyRow") using jQuery or CSS. Simply applying a energyRow:hover seems ineffective as hovering over child divs does not trigger the effect. I have attempted the following approach without success. Any suggestions or ideas are greatly appreciated!

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

jquery html css

Answer 1

Answer №1

Your problem may have been caused by dynamically adding elements to the DOM without utilizing event delegation binding methods such as .delegate(). One way to handle this is through CSS, which can improve performance. However, it is worth noting that adding a class to an element via JavaScript does not significantly increase overhead:

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

For a demonstration, you can visit: http://jsfiddle.net/zNWGL/

Additionally, your code was very close to working properly. All you needed to do was eliminate the use of .parent() from your selection. Here is a modified version of your code without .parent(): http://jsfiddle.net/zNWGL/1/

Answer 2

Your problem may have been caused by dynamically adding elements to the DOM without utilizing event delegation binding methods such as .delegate(). One way to handle this is through CSS, which can improve performance. However, it is worth noting that adding a class to an element via JavaScript does not significantly increase overhead:

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

For a demonstration, you can visit: http://jsfiddle.net/zNWGL/

Additionally, your code was very close to working properly. All you needed to do was eliminate the use of .parent() from your selection. Here is a modified version of your code without .parent(): http://jsfiddle.net/zNWGL/1/

Answer 3

Answer №2

Can this be of assistance?

$('#energyRowContainer').find('.energyRow').hover(function() {
    $(this).parent().addClass('name_of_a_hover_class'); // Adding a class on hover
}, function() {
    $(this).parent().removeClass('name_of_a_hover_class'); // Removing the class on mouse out
});

Remember to include this code snippet either after your div tags or within your document ready event.

Answer 4

Can this be of assistance?

$('#energyRowContainer').find('.energyRow').hover(function() {
    $(this).parent().addClass('name_of_a_hover_class'); // Adding a class on hover
}, function() {
    $(this).parent().removeClass('name_of_a_hover_class'); // Removing the class on mouse out
});

Remember to include this code snippet either after your div tags or within your document ready event.

Answer 5

Answer №3

The problem with your code lies in the usage of $(this).parent(), which selects the parent element of the one you hovered over and toggles the class on it.

Simply use $(this) instead, as it will target the container you hovered over and toggle the class on that element.

Additionally, since the elements are dynamically added, it is recommended to utilize the delegate method with on (introduced 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');
});

Alternatively, you can achieve this effect through pure CSS like so:

.energyRow:hover {
    background: whateverColor;
}

.delegate() reference - http://api.jquery.com/delegate/
.on() reference - http://api.jquery.com/on/

Answer 6

The problem with your code lies in the usage of $(this).parent(), which selects the parent element of the one you hovered over and toggles the class on it.

Simply use $(this) instead, as it will target the container you hovered over and toggle the class on that element.

Additionally, since the elements are dynamically added, it is recommended to utilize the delegate method with on (introduced 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');
});

Alternatively, you can achieve this effect through pure CSS like so:

.energyRow:hover {
    background: whateverColor;
}

.delegate() reference - http://api.jquery.com/delegate/
.on() reference - http://api.jquery.com/on/

Hover over the entire row to see it light up

Answer №1

Answer №2

Answer №3

Similar questions

Dynamically create a button using jQuery and JSON based on specific conditions (either true or false)

Passing data from a textbox on a PHP page to a textbox on an ASP.NET website

The next column featuring a dropdown menu

What is the best way to fetch Ajax information for use in several drop-down menus?

What is the best way to enclose text within a border on a button?

What is the specific use of the second app.css file in Laravel?

Object C UIWebView adapting to HTML

What is the best way to update HTML element contents with new code without losing any associated JavaScript functions?

What is the best way to align a Font Awesome icon within an SVG circle?

How to maintain aspect ratio when setting max-height on React strap/Bootstrap CardImg?

Please enter the text in the field provided at the bottom using IE10

Is the input box failing to show up on your screen?

Saving the form data of a user into the Django models database

Saving and accessing AJAX XML responses in sessionStorage

Error encountered when clicking on a checkbox in Bootstrap: Uncaught TypeError - Unable to access property 'click' of undefined

Transmit information to PHP server using AJAX and FormData

Insert content into a designated DIV

Guide on transferring PHP database information to JQuery and then adding it to a Table

reverse the effects of a jQuery animation

Tips for effectively utilizing jquery selectors with JSON data output