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

使用jQuery怎么样？

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

Answer 2

更改选择器的顺序

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

创建同时悬停效果

2 个答案: