javascript - 将鼠标悬停在 prepend() 函数中

Question

HTML:

<div class="Wrap">
    <div class="container">
        <div class="count">My Counter</div>
        <div class="background"></div>
        <div class="hover"></div> 
    </div>
</div>
<button class="AddDiv">AddDiv</button>

jQuery:

$('.AddDiv').on('click', function(){
    $('.Wrap').prepend($('<div class="container"><div class="background"></div><div class="hover"></div></div>')); 
});

$(".background").on("mouseover", function () {
    $(".hover").fadeIn(500);
});

$(".hover").on("mouseout", function () {
    $(".hover").fadeOut(200);
});

https://jsfiddle.net/mpd075s8/5/

您好，我在悬停时遇到问题，查看 jsfiddle 并单击按钮 AddDiv，当悬停在绿色方 block 上时，悬停的都是 div，但我希望每个 div 都单独悬停。并且悬停在新 div 中不起作用

Answer 1

有两件事

1. 您需要使用delegated event对于动态元素

2. 使用this作为当前元素的引用。

尝试如下。

$('.AddDiv').on('click', function() {
    $('.Wrap').prepend($('<div class="container"><div class="background"></div><div class="hover"></div></div>'));
});

$(".Wrap").on("mouseover", ".background", function () {
    $(this).next(".hover").fadeIn(500);
});

$(".Wrap").on("mouseout", ".hover", function () {
    $(this).fadeOut(200);
});

.Wrap {
  width: 650px;
  height: 800px;
}

.container {
  position: relative;
  top: 5px;
  left: 5px;
  width: 200px;
  height: 200px;
  background-color: red;
  float: left;
  margin-left: 5px;
  margin-top: 5px;
}

.AddDiv {
  position: absolute;
  top: 0px;
}

.background {
  width: 20px;
  height: 20px;
  background-color: green;
  position: absolute;
  left: 170px;
  top: 10px;
}

.hover {
  width: 200px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  z-index: 1001;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrap">
  <div class="container">
    <div class="background">
    </div>
    <div class="hover">
    </div>
  </div>
</div>
<button class=AddDiv>AddDiv</button>