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 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/

使用css悬停更改颜色而不影响子div

1 个答案: