Mouseenter and append don't work well

Question

I need it when the mouseenter current div adds some text to the div, but it doesn’t work, sometimes it sometimes shows that there is no example script here

code:

 $(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

This is because the event is bubbling. ( What happens when you trigger and capture an event? )

You can see the difference between mouseover / mouseout and mouseenter / mouseleave below the link.

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

The solution to your problem:

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

JS working script

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

Answer 2

you just need a mouseleave event :)