CSS子选择器不起作用[重复]答案

【问题标题】：CSS child selector not working [duplicate]CSS子选择器不起作用[重复]
【发布时间】：2014-01-10 02:08:10
【问题描述】：

我有以下 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;”）

【问题讨论】：

标签： html css

【解决方案1】：

'>' 选择器查询 child 后代。试试

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

【讨论】：

是的。那行得通！有趣的是，你花了这么多时间试图让某些东西工作，而你却跳过了显而易见的事情（我最初试图用 jQuery 来做这件事）
或者你可以使用.resultimage:hover > a > .resultpic

【解决方案2】：

> 是直接子选择器

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

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

【讨论】：

【解决方案3】：

添加 :hover 到您选择的特定元素。它更有意义：

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

查看 jsfiddle 上的演示 http://jsfiddle.net/dwX99/

【讨论】：

【解决方案4】：

试试这个：

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

【讨论】：