Question

my original problem involves bootstrap icons inside a div which changes color on hover.
for simplicity, I made the jsfiddle with the follow code to explain the problem

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 can be found here

The problem:

the outcome of this code is not what I want to accomplish. I’d like #child to appear background-color: tranparent but #parent to change color to blue.

I know my :hover is wrong, but how do I apply 2 different things on one :hover (change color of #parent and displaying #child)?

Answer 1

You must use two selectors, you can’t do it with only one, so you can write something like the following:

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

Demo: http://jsfiddle.net/qTdkt/2/