mouseenter只输入一个DIV而不是同一类的所有DIV

Question

我有几个具有相同类(.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

Answer 1

下面是一个工作示例:
我使用类.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>