javascript - mouseenter 和 append 效果不佳

Question

我需要当 mouseentercurrent div 将一些文本附加到 div 但有时效果不好有时显示有时没有这里是 fiddle example

代码:

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

它的发生是因为事件冒泡。 ( What is event bubbling and capturing? )

您可以从下面的链接看到 mouseover/mouseout 和 mouseenter/mouseleave 之间的区别。

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

你的问题的解决方案是..

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

工作 JS fiddle

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