ホバー付きテーブル内のターゲットDIV

Question

のような表があります。

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

「img」クラスの私のdivには、グレースケール100％の背景画像：url（ ''）があります。

グレースケールを削除したい場合は、この<td>の上にカーソルを置いてください。これは可能ですか？私はdivを "ターゲット"して削除する方法を正確には分かりません。私はこのような何かをした

：

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

しかし、それはホバーではなく、実際のdivを得るのtdのthatsをだから、それは動作しません。

また、絶対divを、私のTDの相対divの中に入れようとしました。それから、私はそれを目標とすることができますが、それは<td>ではなくdivにカーソルを置いたときにのみ機能します。

これは可能ですか？私はReactを使用しています。だから、もしJSがあれば、それが1つの解決策になると思います。

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;を追加しました。希望が役立ちます。