css - 使用 css hover 更改颜色而不影响子 div

Question

我最初的问题涉及 div 内的 Bootstrap 图标，它会在悬停时改变颜色。为了简单起见，我用下面的代码制作了 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 here

问题:

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

我知道我的 :hover 是错误的，但是我如何在一个 :hover 上应用 2 个不同的东西(改变 #parent 的颜色并显示 #child)?

Answer 1

你必须使用两个选择器，你不能只用一个，所以你可以这样写:

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

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