javascript - 悬停时更改表格内容？

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，会发生以下两个变化：

1. 爆米花图像更改为此图像：http://i.imgur.com/K29T3Fw.png
2. 文本颜色变为红色。

• 它应该具有 CSS 'fade' 样式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'
    }
};

演示在这里

---

jQuery（选项 2）

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

演示在这里

编辑：

新的演示在这里

Answer 2

尝试这个

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。

Answer 3

如果一个元素是另一个元素的子元素，则可以悬停和更改其他元素的数据/样式

这是您可以继续进行的可能方向，并且可行

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

这是链接

悬停改变