带有类的img元素的CSS选择器

Question

我有

<a href="/">
  <img class="myClass" src="someImg.jpg" />
</a>

我尝试使用以下方法对图像应用悬停效果：

img .myClass:hover {
  opacity: 1;
}

为什么不起作用？

Answer 1

选择器img .myClass将选择myClass类为img元素的a descendant的元素。但由于img元素不能包含后代元素，因此没有意义。

您想要选择img类myClass的{​​{1}}元素，因此您需要删除空格：

img.myClass:hover {
  opacity:1;
}

div {
  border: 1px solid;
  display: inline-block;
}
img {
  opacity: 0;
  transition: 200ms ease-in;
  vertical-align: top;
}
img.myClass:hover {
  opacity: 1;
}

<div>
  <img class="myClass" src="//placehold.it/200" />
</div>