Ich habe eine Liste verschachtelter Elemente, von denen jedes über einen eigenen Bearbeitungslink verfügt.

<ul>
<li>Coffee</li>
<li>
    Fruits <a href="#" class="editLink">Edit</a>
    <ul>
        <li>Banana <a href="#" class="editLink">Edit</a></li>
        <li>Orange <a href="#" class="editLink">Edit</a></li>
        <li>
            Apple <a href="#" class="editLink">Edit</a>
            <ul>
                <li>Fuji <a href="#" class="editLink">Edit</a></li>
                <li>Red Delicious <a href="#" class="editLink">Edit</a></li>
                <li>Golden <a href="#" class="editLink">Edit</a></li>
            </ul>
        </li>
    </ul>
</li>
<li>
    Drinks <a href="#" class="editLink">Edit</a>
    <ul>
        <li>Coke <a href="#" class="editLink">Edit</a></li>
        <li>Pepsi <a href="#" class="editLink">Edit</a></li>
    </ul>
</li>
<li>Something <a href="#" class="editLink">Edit</a></li>
</ul>

Ich möchte nur, dass der Bearbeitungslink angezeigt wird, wenn man den Mauszeiger über das Listenelement hält. Derzeit ist auch das übergeordnete Element betroffen, wenn ich den Mauszeiger über ein untergeordnetes Element bewege.

$('li').hover(
    function(){
        $(this).find('.editLink').show();
    },
    function(){
        $(this).find('.editLink').hide();   
    }
);

Ich habe das folgende CSS, um den Bearbeitungslink anfangs auszublenden

.editLink{
    display:none;
}

Wie mache ich es so, dass nur das schwebende Element den Bearbeitungslink anzeigt und nicht die anderen? Scheint, als wäre der Versteckteil in Ordnung, aber der Show-Teil betrifft alle verschachtelten Eltern. Hier ist das Beispiel in Aktion:http://jsfiddle.net/D7yWm/