Question

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

 <table>
      <thead></thead>
      <tbody>
           <tr>
               <td>
                   <div class="img"></div>
               </td>
           <tr>
      </tbody>
  </table>

在我的div中使用“img”类我有一个背景图像：url（''），灰度100％。

当我将鼠标悬停在此<td>上时，我希望能够删除灰度。这可能吗？我不确定如何“定位”div并将其删除。

我做了这样的事情：

.img:hover {
    filter: grayscale(0%)
}

但它不起作用，因为它是td，而不是实际的div。

我还尝试在我的td中的相对div内放置一个绝对div。然后我可以定位它，但只有当我将鼠标悬停在div上时才会起作用，而不是<td>。

这可能吗？我正在使用React，所以如果使用JS更容易，我想这可能是一个解决方案。

Answer 1

正如Quentin建议您可以通过CSS后代选择器轻松完成。将悬停放在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>

Answer 2

所以我稍微使用了你的代码，我认为你唯一缺少的就是分号。看看

https://jsfiddle.net/max234435/s00fzn7g/

我添加了background-color: red;，因为我无法实现灰度。希望有所帮助。

用悬停在目标内的目标DIV

2 个答案: