Question

我有以下HTML代码：

<div class="resultimage">
    <a href="www.site.com">
        <img class="resultpic" src="images/image.jpg">
        <img class="resultview" src="images/view.png">
    </a>
</div>

和以下CSS：

.resultimage:hover > .resultpic {
opacity: 0.7;
}

这似乎不起作用。该页面将包含这个确切代码块的多个实例（我不确定这是否重要）。我可能会想到这一切都错了，但我想要实现的是：每当你将鼠标悬停在第一张图像上时，第二张图像会显示在其上方，第一张图像的不透明度会降低。实现这一目标的最佳方法是什么？（第二个图像默认设置为“display：none;”）

Answer 1

'＆gt;'选择器查询子后代。试试

.resultimage:hover .resultpic {
    opacity: 0.7;
}

Answer 2

>是直接子选择器

但<img class="resultview" src="images/view.png">不是<div class="resultimage">的直接子项，而是后代。因此正确的语法是

.resultimage:hover .resultpic {
    opacity: 0.7;
}

Answer 3

添加：将鼠标悬停在您选择的特定元素上。它更有意义：

.resultimage .resultpic:hover{
    opacity:0.7;
}

请参阅jsfiddle http://jsfiddle.net/dwX99/

上的演示

Answer 4

试试这个：

.resultimage:hover img.resultpic {
    opacity: 0.7;
}

CSS子选择器无法正常工作

4 个答案: