Question

Here’s some sample HTML

<style> .icon {display:none;} </style>
<ul>
    <li>ABC <i id="abc" class="icon">x</i></li>
    <li>DEF <i id="def" class="icon">x</i></li>
    <li>GHI <i id="ghi" class="icon">x</i></li>
</ul>

I need to show .icon when I hover over its parent li.

Here’s what I’m trying:

$('.icon').each().parent().hover(function() {
    $(this).children('.icon').toggle();
});

Can you point me in the right direction?

Answer 1

You can do this with CSS too (although problematic in IE, since it has issues with :hover on tags other than A):

<style> 
.icon {display:none;} 
li:hover .icon {display:inline;}
</style>