CSS - 将鼠标悬停在任何元素上以触发所有元素的过渡

Question

我正在创建一个网站，并在表格中制作标题，其中每一列是不同的部分，计划是顶行是图片链接，底行是该部分的名称.. . 也是一个链接（虽然我还没有真正开始制作它们的链接）。如果我将表格剥离到它的列，看起来就像这样：

<table>
    <tr>
        <td style="width: 100px; max-height: 100px" id="header-games-button"><img src="header-games.png" class="header-icon block"></td>
    </tr>
    <tr>
        <td id="header-games-text" class="headermidrow">Games</td>
    </tr>
</table>

CSS（我敢肯定，这是一团糟）：

.header-icon{
    width: 100px;
    height: 100px;
    top: 0px;
    left: 0px;
}

.block{
    display: block;
}

.headermidrow{
    height: 20px;
}

#header-games-button{
    background-color: #fca93e;
    -webkit-transition: background-color .2s;
    transition: background-color .2s;
}

#header-games-button:hover{
    background-color: #fc8e00;
}

#header-games-text{
    background-color: white;
    color: #fca93e;
    text-align: center;
    -webkit-transition: color .2s;
    transition: color .2s;
}

#header-games-text:hover{
    color:#fc8e00;
}

因此，直截了当：我希望能够将鼠标悬停在图标或文本链接上，并播放它们的两个过渡以将它们更改为悬停颜色。我环顾四周，似乎找不到任何可以工作的东西（我尝试了一点 CSS 和一点 jQuery）。

纯 CSS 解决方案会很棒，但 JS/jQuery 也可以，如果这是最好的方法。此外，如果它能让我的工作更轻松，我也愿意重新设计整个部分（刚刚开始，设计还不是一成不变的）。

谢谢

Answer 1

您应该使用table:hover 来获取您提到的内容。

CSS

/*
#header-games-button:hover{
    background-color: #fc8e00;
}
#header-games-text:hover{
    color:#fc8e00;
}*/

table:hover #header-games-text {
    color: #fc8e00;
}
table:hover #header-games-button {
    background-color: #fc8e00;
}