CODEWITHSUNDEEP
htmlcssstyles
FlannelBeard
FlannelBeard

Reputation: 65

Change child CSS on parent:hover

I am trying to change a child elements CSS by hovering over the parent. Below is an example of my markup:

<ul class="effect">
  <li> something here </li>
</ul>

When you hover over the UL, this transition happens: 

.effect:hover{ 
transform: translate(0,-5px);
-webkit-transform: translate(0,-5px);
-o-transform: translate(0,-5px); 
-moz-transform: translate(0,-5px); 
}

My UL element is dark grey, while the LI is styled with white and blue text. I want to make it so the UL turns blue, and the blue text in my LI turns white.

You can see what I am trying to accomplish in my tabs, under the slider, here

Upvotes: 0

Views: 89

Answers (2)

Diego
Diego

Reputation: 495

try this: 

.effect:hover .effect li
{
    color: #0000ff /* blue color */
}

.effect:hover
{    
    color: #fff /* white color */
}

Upvotes: 1

Christoph B&#252;hler
Christoph B&#252;hler

Reputation: 2923

You can just do it like this:

.effect:hover > li { color: red; }

So when you hover the .effect elements, the li childs, which are directly under the element will be affected.

<ul class="effect">
  <li> <!-- affected -->
    <ul>
      <li></li> <!-- not affected! -->
    </ul>
  </li>
</ul>

This is useful for dynamic CSS navigations, because not all the children are affected from the hover..

Upvotes: 2

Related Questions