Nested hovers

by Ben Gillbanks

HTML

<p>Essentially this works however I want to tweak the code so that the parent divs are not effected by the children</p>
<div id="comments">
    <div class="comment">
        hello <span><a href="/">link</a></span>
    </div>
    <div class="comment">
        hello <span><a href="/">link</a></span>
        <div class="comment">
            hello <span><a href="/">link</a></span>
        </div>
    </div>
    <div class="comment">
        hello <span><a href="/">link</a></span>
    </div>
</div>

CSS

.comment {
    padding:10px;
    border:1px solid #eee;
}

.comment div {
    margin-top:10px;
}

p {
    margin-bottom:10px;
}

JavaScript

var allSpans = jQuery('#comments span').hide();
var overTimeout;

jQuery("#comments div").bind('mouseover mouseleave', function(event) {
    event.stopPropagation();
    clearTimeout(overTimeout);
    var firstSpan = jQuery(this).find('span').first();
    allSpans.fadeOut(50);
    if (event.type == 'mouseover') {
        overTimeout = setTimeout(function() {
            firstSpan.stop(true, true).fadeIn();
        }, 150);
    }
});