CODEWITHSUNDEEP
css
charlie
charlie

Reputation: 481

CSS hover for another element inside the same element

I have this CSS:

.int_menu > li.showhide {
    display: none;
    width: 100%;
    height: 50px;
    cursor: pointer;
    color: #FFFFFF;
    background: #F36F25;
}
.int_menu > li.showhide:hover {
    display: none;
    width: 100%;
    height: 50px;
    cursor: pointer;
    color: #F36F25;
    background: #FFFFFF;
}

which changes the background colour on hover fine, however i also have an em which i need to change when the above is hovered over, i tried adding :hover after em

.int_menu > li.showhide .icon em {
    margin-bottom: 3px;
    display: block;
    width: 20px;
    height: 2px;
    background: #FFFFFF;
}

but that didnt work and it only does the change when hovering over each em

how can i make all em elements inside li.showhide change on hover of .int_menu > li.showhide:hover {

Upvotes: 0

Views: 41

Answers (1)

Ben Kolya Mansley
Ben Kolya Mansley

Reputation: 1793

What you're trying to do is this. I think you were pretty close, you just have to put the child selector after the :hover.

CSS: 

.int_menu > li.showhide:hover em { 
    margin-bottom: 3px; 
    display: block;
    width: 20px; 
    height: 2px; 
    background: #FFFFFF; 
}

Or something similar

Upvotes: 4

Related Questions