我有
<a href="/">
<img class="myClass" src="someImg.jpg" />
</a>
我尝试使用以下方法对图像应用悬停效果:
img .myClass:hover {
opacity: 1;
}
为什么不起作用?
选择器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>