OnMouseOver this, show this but OnMouseOut, hide it

Question

<div class="profile-banner" onMouseOver="fadeIn('edit-banner');" onMouseOut="fadeOut('edit-banner');">
    <div id="edit-banner">
        Edit Banner
    </div>
</div>

(Formating is being weird on stackoverflow.. so ignore the formating.)

Anywho, the problem I'm having is the second I put my mouse over the "Edit banner" area, it recognizes that i'm on another element, so it fades it out. I need it to stay as long as i'm in that profile-banner area.

Answer 1

jsBin demo

Use CLASS .edit-banner

<div class="profile-banner">
    <div class="edit-banner">
        Edit Banner
    </div>
</div>

$('.profile-banner').on('mouseenter mouseleave',function( e ){
    var inOut = e.type=='mouseenter' ? 1 : 0;
    $(this).find('.edit-banner').stop().fadeTo(500, inOut);
});