鼠标输入和追加不能正常工作

mouseenter and append not work good

本文关键字：工作 常工作 输入 追加 不能 鼠标      更新时间：2023-09-26

我需要当mouseenter当前div追加一些文本到div中，但有时不工作，有时显示，有时没有这里是fiddle的例子

代码:

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

这是因为事件冒泡。(什么是事件冒泡和捕获?)

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

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

你的问题的解决办法是……

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

Working JS Fiddle

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

你只需要mouseleave事件:)

相关文章：