Javascript 创建同步悬停效果

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

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

在大多数情况下，我都能工作，除了一个小问题。图像只是表格单元格的一小部分，我必须在图像本身上滚动才能改变不透明度。如果没有，它将只填充表格单元格背景（下图中有一个示例）。我想知道是否有可能将两个悬停效果链接在一起，这样一旦表格单元格悬停在上面，背景颜色和图像不透明度就会发生变化

这是我的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>

这已经困扰了我好几天了，所以我最终决定寻求一些帮助。任何帮助都将不胜感激

使用jQuery怎么样

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

使用jQuery怎么样

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

---

更改选择器的顺序

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

---

更改选择器的顺序

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

---

为什么不使用“.logo\u区域：悬停一个img”和“.logo\u区域：悬停一个”。通过这种方式，您可以通过将鼠标悬停在“.logo\u区域”上来访问元素内部的“.logo\u区域”本身。logo\u区域：悬停一个img”和“.logo\u区域：悬停一个”。通过这种方式，您可以通过悬停在“.logo\u区域”上来访问“.logo\u区域”内部元素。它本身工作得非常漂亮，正是我想要的！谢谢你！这工作得很好，正是我想要的！谢谢你！这也很完美！我很感谢你的帮助，这肯定会让你更容易添加任何悬停效果。是的…你也可以从悬停中获取事件。这也很完美！我非常感谢您的帮助，这肯定会使添加任何悬停效果变得更容易。是的……您也可以从该悬停中获取事件。