html - 将鼠标悬停在表格内的目标 DIV

Question

有一个常规表，看起来像这样。

 <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 更容易，我想这可能是一种解决方案。

Answer 1

正如 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>