Javascript 悬停在prepend（）函数中

HTML:

我的柜台
阿迪夫

jQuery：

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

$（'.AddDiv'）。在（'click'，function（）上{
$（'.Wrap'）。前置（$（''）；
});
$（.background”）.on（“鼠标悬停”，函数（）{
$（“.hover”）.fadeIn（500）；
});
$（“.hover”）.on（“mouseout”，函数（）{
$（“.hover”）.fadeOut（200）；
});

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

您可以使用

$（this）

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);
});

您可以使用

$（此）

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);
});

两件事

您需要使用动态元素

使用

此

作为当前元素的参考

试着像下面这样

$（'.AddDiv'）。在（'click'，function（）上{
$（'.Wrap'）。前置（$（''）；
});
$（.Wrap”）.on（“鼠标悬停”，“.background”，函数（）{
$（this.next（“.hover”）.fadeIn（500）；
});
$（“.Wrap”）.on（“mouseout”，“.hover”，函数（）{
美元（本）。淡出（200）；
});
.Wrap{
宽度：650px；
高度：800px；
}
.集装箱{
位置：相对位置；
顶部：5px；
左：5px；
宽度：200px；
高度：200px；
背景色：红色；
浮动：左；
左边距：5px；
边缘顶部：5px；
}
AddDiv先生{
位置：绝对位置；
顶部：0px；
}
.背景{
宽度：20px；
高度：20px；
背景颜色：绿色；
位置：绝对位置；
左：170px；
顶部：10px；
}
.悬停{
宽度：200px；
高度：200px；
背景色：rgba（255、255、255、0.8）；
位置：绝对位置；
z指数：1001；
显示：无；
}

AddDiv
两件事

您需要使用动态元素

使用
此
作为当前元素的参考

试着像下面这样


$（'.AddDiv'）。在（'click'，function（）上{
$（'.Wrap'）。前置（$（''）；
});
$（.Wrap”）.on（“鼠标悬停”，“.background”，函数（）{
$（this.next（“.hover”）.fadeIn（500）；
});
$（“.Wrap”）.on（“mouseout”，“.hover”，函数（）{
美元（本）。淡出（200）；
});
.Wrap{
宽度：650px；
高度：800px；
}
.集装箱{
位置：相对位置；
顶部：5px；
左：5px；
宽度：200px；
高度：200px；
背景色：红色；
浮动：左；
左边距：5px；
边缘顶部：5px；
}
AddDiv先生{
位置：绝对位置；
顶部：0px；
}
.背景{
宽度：20px；
高度：20px；
背景颜色：绿色；
位置：绝对位置；
左：170px；
顶部：10px；
}
.悬停{
宽度：200px；
高度：200px；
背景色：rgba（255、255、255、0.8）；
位置：绝对位置；
z指数：1001；
显示：无；
}

AddDiv
将您的解决方案作为答案中的代码发布，仅使用演示支持答案中实际存在的内容将您的解决方案作为答案中的代码发布，仅使用演示支持答案中实际存在的内容谢谢您的帮助！：）谢谢你的帮助！：）