Is it possible to alter the table information while hovering over it?

Question

Is it possible to alter the table information while hovering over it?

I currently have a table structured like this:

<div class="footer_row_3">
   <table class="tableA">
      <tr>
         <td><img class="popcorn" src="http://i.imgur.com/HUjq2Va.png"></td>
         <td><span class="statement">Lorem Ipsum</span></td>
         <td><img class="popcorn" src="http://i.imgur.com/HUjq2Va.png"></td>
      </tr>
   </table>
</div>

My goal is to implement two changes when the mouse hovers over any part of tableA:

The popcorn images should be replaced with this image: http://i.imgur.com/K29T3Fw.png
The text color should change to red.

This effect should include a CSS 'fade' style transition, allowing for a smooth transition between styles.
Both changes mentioned above should occur when hovering over tableA from any area within the table.

While I am familiar with changing individual elements on hover, I am unsure how to apply these changes simultaneously across multiple items. Any guidance on achieving this effect would be appreciated.

How can I accomplish this desired effect?

javascript html css html-table hover

Answer 1

Answer №1

Modifying the data and styles of other elements upon hovering is achievable when one element is nested within another

If you're wondering how to start, here's a simple approach that can be effective:

#parent_element:hover > child_element {
    //Implement changes to your desired styling or images
}

For more details, visit this link:

Hover to change

Answer 2

Modifying the data and styles of other elements upon hovering is achievable when one element is nested within another

If you're wondering how to start, here's a simple approach that can be effective:

#parent_element:hover > child_element {
    //Implement changes to your desired styling or images
}

For more details, visit this link:

Hover to change

Answer 3

Answer №2

Check out this solution:

CSS

span{
    transition: color 2s ease;
}
.tableB:hover span{
    color:blue;
}

Vanilla JavaScript (option 1)

document.getElementsByClassName('tableB')[0].onmouseover = function () {
    var images = document.getElementsByClassName('popcorn');
    console.log(images);
    for (i = 0; i < images.length; i++) {
        images[i].src = 'http://i.imgur.com/ABCDE.png'
    }
};

Demo here

jQuery (option 2)

$('.tableB').hover(function () {
    $('.popcorn').prop('src', 'http://i.imgur.com/ABCDE.png');
});

Demo here

UPDATED:

New demo here

Answer 4

Check out this solution:

CSS

span{
    transition: color 2s ease;
}
.tableB:hover span{
    color:blue;
}

Vanilla JavaScript (option 1)

document.getElementsByClassName('tableB')[0].onmouseover = function () {
    var images = document.getElementsByClassName('popcorn');
    console.log(images);
    for (i = 0; i < images.length; i++) {
        images[i].src = 'http://i.imgur.com/ABCDE.png'
    }
};

Demo here

jQuery (option 2)

$('.tableB').hover(function () {
    $('.popcorn').prop('src', 'http://i.imgur.com/ABCDE.png');
});

Demo here

UPDATED:

New demo here

Answer 5

Answer №3

give this a shot

div.box:hover span.message {
    color: blue;
    -webkit-transition: color 1s ease-in-out;
    -moz-transition: color 1s ease-in-out;
    -o-transition: color 1s ease-in-out;
    -ms-transition: color 1s ease-in-out;
    transition: color 1s ease-in-out;
}

div.box:hover img.popcorn {   
    opacity:0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out; 
}

div.box td.start, div.box td.end {
     background: url('http://i.imgur.com/K29T3Fw.png');
}

to have more flexibility and avoid using first-child and last-child, assign classes to the tds.

Answer 6

give this a shot

div.box:hover span.message {
    color: blue;
    -webkit-transition: color 1s ease-in-out;
    -moz-transition: color 1s ease-in-out;
    -o-transition: color 1s ease-in-out;
    -ms-transition: color 1s ease-in-out;
    transition: color 1s ease-in-out;
}

div.box:hover img.popcorn {   
    opacity:0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out; 
}

div.box td.start, div.box td.end {
     background: url('http://i.imgur.com/K29T3Fw.png');
}

to have more flexibility and avoid using first-child and last-child, assign classes to the tds.

Is it possible to alter the table information while hovering over it?

Answer №1

Answer №2

New demo here

Answer №3

Similar questions

What are the different methods for completing a form?

Is there a way to automatically divide CSS-emulated table cells into multiple rows?

Examining the creation of mongoose model instances with Jest

CSS navigation drop down menu styling

Utilizing AngularJS to invoke an ng-controller within a nested controller structure

Obtaining image urls from RSS feeds

What is the best way to retrieve information from a database using JSON with PHP, JQUERY, and

What is the best method for retrieving the latest three objects that have been created in the database?

ERROR : The value was modified after it had already been checked for changes

Require assistance with arranging font-awesome icons in a stacked formation

Receiving a blank array from the firestore database

Interactive back button for seamless navigation back to the originating modal

Utilizing a robot browser through Selenium WebDriver opens up possibilities for browsing various types of HTML content that may

jQuery: Read the character string until the occurrence of symbols "{" and "}" (language variation on the website)

Add an unordered list to the JSON element with an ID of "1", repeating it 'chapter_count' times

Outputting messages to a component with React

What methods can be used to troubleshoot background issues in Three.js? I am experiencing a bug with an infinite

Merge the values into an array based on their shared id within a JSON object

The shiny conditional panel fails to evaluate upon initialization

NodeJS - Headers cannot be modified once they have already been sent to the client