当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Change table contents on hover?

问题描述:

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:

1) Popcorn images change to this image: http://i.imgur.com/K29T3Fw.png

2) 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 ?

网友答案:

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

网友答案:

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

网友答案:

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.

分享给朋友:
您可能感兴趣的文章:
随机阅读: