Question

我有一张这样的表：

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

我想要做的是当鼠标在tableA内的任何位置悬停在tableA上时，会发生以下两种变化：

爆米花图片更改为该图片：http://i.imgur.com/K29T3Fw.png
文字颜色变为红色。

它应具有CSS'淡入'样式transition，以便内容淡入更新的样式内容。
当我将tableA悬停在tableA内的任何位置时，上述任何更改都会发生。

我知道如何在悬停时单独更改文字和图片，但我不知道如何为多个项目一起更改。

我怎样才能达到这个效果？

Answer 1

试试这个：

<强> CSS

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

普通Javascript （选项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'
    }
};

演示here

jQuery （选项2）

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

演示here

修改

新演示here

Answer 2

如果一个元素是其他元素

的子元素，则可以悬停和更改其他元素数据/样式

这是一个可以继续进行的方向，它可以正常工作

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

继承人的链接

Hover to change

Answer 3

试试这个

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

为了更好地控制和摆脱tds的第一个孩子和最后一个孩子添加课程。

在悬停时更改表格内容？

3 个答案:

新演示here