CODEWITHSUNDEEP
htmlcsscss-selectors
CODE SEEK
CODE SEEK

Reputation: 79

Change color of parent li > span when mouse hover on li child ul

Is it possible to change color of parent li span when mouse hover on li child ul. (Only CSS)

Html:

  <ul class="menu">
    <li><a href="#"><i class="icon-list"></i> <span>Home</span></a></li>
    <li><a href="#"><i class="icon-th"></i> <span>test-menu</span></a>
      <ul>
        <li><a href="#"><i class="icon-windows"></i> list-1</a></li>
        <li><a href="#"><i class="icon-windows"></i> list-3</a></li>
        <li><a href="#"><i class="icon-windows"></i> list-2</a></li>
      </ul>
    </li>
  </ul>

Css: 

.menu > li > a:hover > span {
  color:red;
}

I tried:

.menu > li > a > span + ul:hover {
  color:red;
}

Fiddle : http://jsfiddle.net/xk4Ph/1/

Upvotes: 3

Views: 5022

Answers (2)

St&#233;phane Mex
St&#233;phane Mex

Reputation: 1

You can add a class to your li <li class="test"><a href="#"><i class="icon-windows" ></i> list-1</a></li> and edit your css : .test a:hover{ color: #000000; }

Upvotes: 0

Yotam Omer
Yotam Omer

Reputation: 15356

This can be done using CSS only since the ul is a child of the li... working jsFiddle

Use the following selector: 

.menu > li:hover > a > span

use :hover on the li instead of the a

Upvotes: 9

Related Questions