CSS Hover on parent list Item only
- by Daniel O'Connor
Hey Everyone,
So I have some nested lists (only one level deep) and I'm running into trouble with the CSS :hover feature. I only want the hover to apply to the parent class, but I can't figure that one out.
Here's my CSS
<style type="text/css" media="screen">
.listblock li img {
visibility: hidden;
}
.listblock li:hover img {
visibility: visible;
}
</style>
And here is a sample of one of the lists.
<ul>
<li>One <a href="#"><img src="img/basket.png" height="16" width="16" alt="Buy" class="buy" onClick="pageTracker._trackEvent('Outbound Links', 'Amazon');"/></a></li>
<li>Two <a href="#"><img src="img/basket.png" height="16" width="16" class="buy" /></a>
<ul>
<li>Uno<a href="#"><img src="img/basket.png" height="16" width="16" class="buy" /></a></li>
<li>Dos <a href="#"><img src="img/basket.png" height="16" width="16" class="buy" /></a></li>
</ul>
</li>
<li>Three <a href="#"><img src="img/basket.png" height="16" width="16" alt="Buy" class="buy" onClick="pageTracker._trackEvent('Outbound Links', 'Amazon');"/></a></li>
</ul>
The problem is that the image in the Uno and Dos list items also hovers. :(
Help please!
Thanks a lot
