我有几个具有相同类(.slider)的div。
我想在div上执行上滑和下滑,
这里的问题是，该函数适用于所有具有该类的DIV，而不仅仅是我放鼠标的那个。
有什么想法吗？
null
$('.container').on("mouseenter", function() {
$(".slider").slideDown();
});
$('.container').on("mouseleave", function() {
$(".slider").slideUp("400");
});.container {
width: 100px;
}
.image{
height: 100px;
width: 100px;
background: #000000;
}
.slider {
background-color: #333333;
color: #ffffff;
margin: -50px 0 0 0;
height: 50px;
width: 100%;
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="image">
</div>
<div class="slider">
<div class="title">Title</div>
<div class="text">Text</div>
</div>
<br/ >
<div class="image">
</div>
<div class="slider">
<div class="title">Title</div>
<div class="text">Text</div>
</div>
</div>null
下面是一个工作示例:
我使用类.block将您的.slider&.image包装到一个新的div中。
然后在JS中检查.block是否为mouseEnter/mouseLeave，如果是这样，我确保用$(this).find('slider')滑入/滑出相应的.slider。
null
$('.block').on("mouseenter", function() {
$(this).find('.slider').slideDown();
});
$('.block').on("mouseleave", function() {
$(this).find('.slider').slideUp("400");
});.container {
width: 100px;
}
.block {
margin-bottom: 20px;
}
.image {
height: 100px;
width: 100px;
background: #000000;
}
.slider {
background-color: #333333;
color: #ffffff;
margin: -50px 0 0 0;
height: 50px;
width: 100%;
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="block">
<div class="image">
</div>
<div class="slider">
<div class="title">Title</div>
<div class="text">Text</div>
</div>
</div>
<div class="block">
<div class="image">
</div>
<div class="slider">
<div class="title">Title</div>
<div class="text">Text</div>
</div>
</div>
</div>