td上のすべての画像をホバリングしますか？

Question

tdまたはtableにすべての画像をホバーしたいです。私は非常に疲れてきた方法を見つけました。方法は：すべての画像を1つずつ分類し、ホバーでCSS'edに分類しました。

しかし、私はこれの代わりに短い道を望んでいます。私は写真をグループ化し、それらをホバーしたい。これは、tdやテーブル上のすべてのイメージである可能性があります。これどうやってするの？

試しました<div>tdしかし、動作しませんでした。手伝ってくれてありがとう。

Answer 1

これを試してください。あなたのCSSでをtdの後に使用すると、それはimgのスタイルに適用され、それはそのtdの直接の子です。彼らが直接の子供でない場合は、>を削除することができます。

td>img{ 
 
    width:100px; 
 
    display:inline-block; 
 
    margin:10px; 
 
} 
 
td>img:hover{ 
 
    opacity:0.2; 
 
    cursor:pointer; 
 
}

<table> 
 
<tr> 
 
    <td class="hoverOver"><img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"></td> 
 
    <td class="hoverOver"><img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"></td> 
 
    <td class="hoverOver"><img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"></td> 
 
    <td class="hoverOver"><img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"></td> 
 
</tr> 
 
</table>