javascript - 创建同时悬停效果

Question

我对如何完成这项任务进行了广泛的研究，但我似乎无法找到合适的方法。

目前，我有一个表格单元格，我想在您滚动表格单元格时同时创建两个悬停效果。首先，它会用红色背景填充整个表格单元格，同时还将相应的图像不透明度提高到 100%。当图像未悬停时，不透明度为 25%。

在大多数情况下，除了一个小问题外，一切正常。该图像只是表格单元格的一小部分，我必须滚动图像本身才能启用不透明度更改。如果没有，它只会填充表格单元格背景(下图中的示例)。我想知道是否可以将这两个悬停效果链接在一起，以便在表格单元格悬停时背景颜色和图像不透明度发生变化。

Example of the current hover effect

这是我的 HTML 代码，以及随附的 CSS。

<td class="logo_area" align="center" style="background-color:#eeeeee;border-bottom: 1px solid #cccccc;">
    <a href="?mode=team&amp;team_id=' . $team_key . '"><img src="/images/logos/50/nhl/' . $team_key . '.png" alt="" border="0" style="opacity:0.25;filter:alpha(opacity=25); margin-top:7px;" /></a>
</td>

---

.logo_area  {
    height: 65px;
}

.logo_area a {
    display: block;
    height: 100%;
}

.logo_area a:hover {
    background-color: #c70000;
    display: block;
    width: 100%;
}

.logo_area a img:hover {
    opacity:1.0 !important;
    filter:alpha(opacity=100) !important;
}

这几天一直困扰着我，所以我终于决定寻求帮助。任何帮助将不胜感激!

Answer 1

更改选择器的顺序

.logo_area a:hover img {
  opacity:1.0 !important;
  filter:alpha(opacity=100) !important;
}