css - 在不影响子 div 的情况下使用 CSS 悬停更改颜色

Question

我最初的问题涉及 div 内的引导图标，它会在悬停时改变颜色。为简单起见，我使用以下代码制作了 jsfiddle 来解释问题

html:

<div id="parent">
    <div id="child">
    </div>
</div>​

CSS：

#parent{
 background-color:red;
 width:100px;
 height:100px;   
}

#parent:hover #child{
 background-color:blue;  
 display:block;    
}
#child{
 background-color:transparent;  
 width:10px;
 height:10px;  
 display:none;
 border: 1px solid black;
}

jsfiddle 可以在这里找到

问题：

这段代码的结果不是我想要完成的。我想#child出现background-color: tranparent，但#parent将颜色更改为蓝色。

我知道我:hover错了，但是如何在一个上应用 2 种不同的东西:hover（改变颜色#parent和显示#child）？

Answer 1

你必须使用两个选择器，你不能只用一个，所以你可以写如下内容：

#parent:hover{
 background-color:blue;   
}
#parent:hover #child {
 display:block;
}

演示：http: //jsfiddle.net/qTdkt/2/