CSS Hover on parent list Item only
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.p开发者_Python百科ng" 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
You can use the child selector >
, like this:
.listblock > ul > li:hover img {
visibility: visible;
}
It's not in your pasted code, so this assumes your <ul>
is immediately wrapped by a class="listblock"
item, if there's something else in-between just add it in with the same format. This selects only the direct child <il>
that's a direct child of a <ul>
that's a direct of .listbox
, so it won't work on the <li>
elements further down.
You can add something like:
.listblock li:hover li img {
visibility: hidden;
}
精彩评论