how to show hidden divs inside list

Problem

I have a ul list with each li constructed like this:

<li class="A">list-item
  <div>1</div>
  <div class="B">2
     <div class="C">3</div>
  </div>
</li>

Where div with class .C has the CSS property display:none;

I would like to show hidden divs on li hover, but I would like it to show only on active li item. So when I hover the li item it shows only that list item hidden div.

Problem courtesy of: meh.meh

Solution

You could achieve it in pure CSS, using a selector such as .A:hover div.C { display:block; }

jsFiddle here.


Example code:

HTML:

<li class="A">list-item
  <div>1</div>
  <div class="B">2
     <div class="C">3</div>
  </div>   
</li>

<li class="A">list-item
  <div>1</div>
  <div class="B">2
     <div class="C">3</div>
  </div>    
</li>

CSS:

div.C {
    display:none;
}

.A:hover div.C {
    display:block;
}
Solution courtesy of: lifetimes

Discussion

You can do it using jQuery and CSS.

HTML code:

<li class="Active">list-item
    <div>1</div>
    <div class="B">2
    <div class="C hideDiv">3</div>
    </div>
</li>

CSS code:

.hideDiv{display:none;}

Jquery Code:

$('li.Active').mouseover(function(){    
    $(this).find('div.C').removeClass('hideDiv');
});

$('li.Active').mouseout(function(){    
    $(this).find('div.C').addClass('hideDiv');
});
Discussion courtesy of: Mahesh Chitroda

This recipe can be found in it's original form on Stack Over Flow.