悬停时更改表格内容？答案

【问题标题】：Change table contents on hover?悬停时更改表格内容？
【发布时间】：2013-09-19 06:34:23
【问题描述】：

我有一张这样的桌子：

<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 'fade' 样式transition，以便内容淡入到更新的样式内容中。
当我从tableA 中的任何位置悬停tableA 时，应该会发生上述两种变化。

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

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

【问题讨论】：

你有没有尝试过？
说实话，不，我没有自己尝试。通常我会，但是这东西对我的水平来说感觉有点高级，这就是为什么我在这种情况下没有自己尝试太多的原因。此外，我已经连续编码了 13 个多小时，所以我现在有点懒惰。希望你不要介意。 :)
你搞定了吗？

标签： javascript html css html-table hover

【解决方案1】：

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

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

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

这是链接

Hover to change

【讨论】：

【解决方案2】：

试试这个：

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

【讨论】：

如果需要，我不介意使用 jQuery，因为我已经在其他地方使用 jQuery。图像会发生变化，但当鼠标离开时它不会恢复到旧图像。你能修这个吗？过渡效果也不同步。图像立即改变，而文字颜色在 2 秒内逐渐改变。您能否在 2 秒内同时更改这两个东西，并在鼠标离开时将它们更改回旧版本，再次在 2 秒内一起更改？
mouseout 上的图像更改工作正常，但过渡仍未同步。也可以解决吗？
@Ahmad，我添加了你的要求。这有帮助吗？

【解决方案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');
}

为了更好地控制和摆脱 first-child 和 last-child 向 tds 添加类。

【讨论】：