mouseenter a nie dołączania działa dobrze

Question

muszę kiedy mouseenter prąd div dołączyć jakiś tekst w div, ale nie działa dobrze czasami pokazują czasami nie tutaj jest fiddle example

Kod:

$(document).ready(function() { 
 

 
    var thmb_wrap = $('.thm-img'); 
 
    var thumb = $('.thm-img img'); 
 
    var outer = $('.mn-img'); 
 
    var full = $('.mn-img img').length; 
 
    var sc_height = $(outer).height(); 
 

 

 
    thmb_wrap.one('mouseenter', function() { 
 

 
    var cur_im = $('.thm-img img').index($(this).children('img')) + 1; 
 
    $(this).append('<span class="numeric">' + cur_im + '/' + (full) + '</span>'); 
 

 
    }); 
 

 
    thmb_wrap.on('mouseenter', function() { 
 
    $(this).children('.numeric').stop().fadeIn(0); 
 
    }); 
 

 
    thmb_wrap.on('mouseout', function() { 
 
    $('.numeric').stop().fadeOut(0); 
 
    }); 
 

 
    $(thumb).mouseenter(function() { 
 

 
    var images = $('.thm-img img'); // get images 
 

 
    // move mouseover onto actual images otherwise you won't know which one is being moused over 
 
    images.on('mouseenter', function() { 
 

 
     var nm = images.index($(this)); 
 
     outer.stop().animate({ 
 
     scrollTop: (sc_height * nm) + "px" 
 
     }, 0); 
 

 
    }); 
 

 

 
    }); 
 
});

.det-sl-wrp { 
 
    display: block; 
 
    width: 100%; 
 
    height: 480px; 
 
    background: #848f99; 
 
    border: 1px solid #fff; 
 
    margin: 8px 0 8px 0; 
 
} 
 
.mn-img { 
 
    position: relative; 
 
    width: 650px; 
 
    height: 100%; 
 
    background: red; 
 
    float: left; 
 
    overflow-y: hidden; 
 
    overflow-x: hidden; 
 
} 
 
.thumb-wrp { 
 
    float: left; 
 
    width: 145px; 
 
    overflow-y: auto; 
 
    height: 100%; 
 
    margin: 0 0 0 8px; 
 
} 
 
.mn-img img { 
 
    float: left; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.sl-lft, 
 
.sl-rgh { 
 
    top: 0; 
 
    right: 0; 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 100%; 
 
    background: rgba(0, 0, 0, 0); 
 
} 
 
.sl-rgh { 
 
    left: 0; 
 
} 
 
.thm-img { 
 
    position: relative; 
 
    width: 100%; 
 
    display: block; 
 
    height: 100px; 
 
    margin: 2px 0 2px 0; 
 
    box-sizing: border-box; 
 
    transition: border 0.3s, left 0.3s; 
 
    border: 1px solid #fff; 
 
} 
 
.thm-img:hover { 
 
    border: 1px solid #E78211; 
 
} 
 
.thm-img img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.numeric { 
 
    display: none; 
 
    position: absolute; 
 
    left: 49px; 
 
    bottom: -1px; 
 
    font-size: 10px; 
 
    color: #fff; 
 
    padding: 2px 0 0 0; 
 
    line-height: 11px; 
 
    width: 30px; 
 
    z-index: 11; 
 
    background-color: #E78211; 
 
    text-align: center; 
 
    font-family: sans-serif; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="det-sl-wrp"> 
 
    <div class="mn-img"> 
 
    <div class="sl-lft"></div> 
 
    <img class="full-img" src="img/img/a.jpg"> 
 
    <img class="full-img" src="img/img/b.jpg"> 
 
    <img class="full-img" src="img/img/c.jpg"> 
 
    <img class="full-img" src="img/img/d.jpg"> 
 
    <img class="full-img" src="img/img/a.jpg"> 
 
    <img class="full-img" src="img/img/c.jpg"> 
 
    <img class="full-img" src="img/img/b.jpg"> 
 
    <img class="full-img" src="img/img/d.jpg"> 
 
    <div class="sl-rgh"></div> 
 
    </div> 
 

 
    <div class="thumb-wrp"> 
 
    <div class="thm-img"> 
 
     <img src="img/img/1.jpg"> 
 
    </div> 
 
    <div class="thm-img"> 
 
     <img src="img/img/2.jpg"> 
 
    </div> 
 
    <div class="thm-img"> 
 
     <img src="img/img/3.jpg"> 
 
    </div> 
 
    <div class="thm-img"> 
 
     <img src="img/img/4.jpg"> 
 
    </div> 
 
    <div class="thm-img"> 
 
     <img src="img/img/1.jpg"> 
 
    </div> 
 
    <div class="thm-img"> 
 
     <img src="img/img/2.jpg"> 
 
    </div> 
 
    <div class="thm-img"> 
 
     <img src="img/img/3.jpg"> 
 
    </div> 
 
    <div class="thm-img"> 
 
     <img src="img/img/4.jpg"> 
 
    </div> 
 
    </div> 
 

 
</div>

Answer 1

Zdarza się, ponieważ bąbelkowanie zdarzeń. (What is event bubbling and capturing?)

Możesz zobaczyć różnicę między mouseover/mouseout a mouseenter/mouseleave z pod linkiem poniżej.

http://www.quirksmode.org/dom/events/mouseover.html

rozwiązanie problemu jest ..

thmb_wrap.on('mouseleave', function() { 
    $('.numeric').stop().fadeOut(0); 
}); 

robocza JS Fiddle

https://jsfiddle.net/ebilgin/cg5135xL/3/

Answer 2

wystarczy mouseleave wydarzenie :)