有一个常规表,看起来像这样。
<table>
<thead></thead>
<tbody>
<tr>
<td>
<div class="img"></div>
</td>
<tr>
</tbody>
</table>
在类为“img”的 div 中,我有一个背景图像:url(''),灰度为 100%。
当我将鼠标悬停在 <td>
上时,我希望能够移除灰度.这可能吗?我不确定如何“定位”div 并将其删除。
我做了这样的事情:
.img:hover {
filter: grayscale(0%)
}
但它不起作用,因为悬停的是 td,而不是实际的 div。
我还尝试将绝对 div 放在我的 td 中的相对 div 中。然后我可以定位它,但只有当我将鼠标悬停在 div 上时它才会起作用,而不是 <td>
.
这可能吗?我正在使用 React,所以如果使用 JS 更容易,我想这可能是一种解决方案。
最佳答案
正如 Quentin 所建议的那样,您可以通过 CSS 后代选择器轻松地做到这一点。将 hover 放在 TD 上,只有当 TD 没有悬停时才应用过滤器:
.img {
width: 96px;
height: 96px;
background: url(https://33.media.tumblr.com/avatar_3439cf77256d_96.png);
}
td:not(:hover) > .img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
<table>
<tbody>
<tr>
<td>
<div class="img"></div>
</td>
</tr>
</tbody>
</table>
关于html - 将鼠标悬停在表格内的目标 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36378851/