创建同时悬停效果

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;
}

Answer 2

jQuery 怎么样？

$( ".logo_area" ).hover(function() {
$( this ).css(
"opacity":"1.0",
"background-color:, "#c70000");    
});