Change table contents on hover?

Question

I have a table 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>

What I want to do is that when the mouse hovers over tableA at any location within tableA, the following two changes happen:

Popcorn images change to this image: http://i.imgur.com/K29T3Fw.png
The text color changes to red.

It should have with a CSS 'fade' style transition, so that the contents fades into the updated style contents.
BOTH changes mentioned above should happen when I hover tableA from any place within tableA.

I know how to individually change text and image on hover, but I don't know how to do it together for multiple items.

How can I achieve this effect ?

To be honest, no I didn't give it a try on my own. Normally I would, but this thing felt a bit more advanced for my level, which is why I didn't try much on my own in this case. Also, I've been coding for like 13+ hours straight in a stretch so I'm a bit lazy right now. Hope you don't mind. :) — Ahmad, Sep 14 '13 at 19:46

Sergio · Answer 1 · 2013-09-14T20:52:30.143

0

Try this:

CSS

span{
    transition: color 2s ease;
}
.tableA:hover span{
    color:red;
}

Plain Javascript (option 1)

document.getElementsByClassName('tableA')[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/K29T3Fw.png'
    }
};

Demo here

jQuery (option 2)

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

Demo here

EDIT:

New demo here

edited Sep 14 '13 at 20:52

answered Sep 14 '13 at 19:27

Sergio

28,539
11
85
132

I don't mind using jQuery if needed, as I'm already using jQuery elsewhere. The image changes, but it does not revert back to the old one when the mouse goes away. Can you fix this ? Also the transition effect is not synchronized. The image changes immediately, while the text color changes gradually over 2 seconds. Can you have both things changing together, over a period of 2 seconds, and also change them back to the old version when the mouse goes away, again together, over a period of 2 seconds ? – Ahmad Sep 14 '13 at 19:44
The image change on mouseout is working, but the transition is still not synchronized. Can that be fixed too ? – Ahmad Sep 14 '13 at 19:51
@Ahmad, I added what you asked. Did this help? – Sergio Sep 15 '13 at 21:28

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

Hover and change of other elements data/ styles is possible if the one element is the child of other

Here's a possible direction you can proceed and it works

#parent_element:hover > child_element {
    //change your required styling or images
}

Heres the link

Hover to change

edited May 23 '17 at 11:50

Community

1
1

answered Sep 14 '13 at 19:28

Anobik

4,841
2
17
32

score 0 · Answer 3 · answered Sep 14 '13 at 21:20

try this

table.tableA:hover span.statement {
    color: red;
    -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;
}

table.tableA: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; 
}

table.tableA td:first-child, table.tableA td:last-child {
     background: url('http://i.imgur.com/K29T3Fw.png');
}

for better control and getting rid of first-child and last-child add classes to the tds.

Change table contents on hover?

3 Answers3

New demo here