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 的“淡入淡出”样式 transition，以便内容淡入更新后的样式内容中。

• 当我将 tableA 悬停在 tableA 中的任何位置时，上述两种更改都会发生。

我知道如何在悬停时单独更改文本和图像，但我不知道如何同时对多个元素进行更改。

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

Answer 1

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

这里有一个可能的方向，你可以继续进行并且它有效

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

这是链接

Hover to change