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

问题描述 投票:5回答:1

我有

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

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

img .myClass:hover {
  opacity: 1;
}

为什么不起作用?

html css
1个回答
8
投票

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

你想选择一个img类的myClass元素,因此你需要删除空格:

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>
© www.soinside.com 2019 - 2024. All rights reserved.