Question

我想将所有图片悬停在td或table上。我发现了一种对我来说非常累人的方式。方法是：我将所有图像逐个归类，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>

将所有图像悬停在td上？

1 个答案: