JQuery SlideUp - 图像背后的背景颜色

Question

我正在使用 JQuery slideUp/slideDown 向图像添加叠加层，该叠加层在鼠标悬停之前一直隐藏，然后从图像底部向上滑动。

向上滑动的 div 被赋予了背景颜色，但它不会显示在图像上，而是显示在它的后面（文本显示在图像的顶部，但我只能看到底部边缘由于我设置的边距，div的背景颜色）。 Z-index 已设置为 100。

有什么想法吗？谢谢！

(function($) {
  $(document).ready(function() {

$(".slider").attr("style", "display: none;");

if ($(".slider")) {
  $('.image').mouseover(function() {
    $(this).find(".slider").slideDown("400");
  }).mouseout(function() {
    $(this).find(".slider").slideUp("400");
  });
}
    
  });
}(jQuery));

.image{
  height: 300px;
  width: 300px;
  background: #000000;
}
.slider {
  background-color: #333333 !important;
  background: #333333 !important;
  background-position: 0% 100%;
  color: #ffffff;
  margin: -90px 0 0 0;
  height: 90px;
  width: 100%;
  z-index: 100 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>
</div>

Answer 1

z-index 仅适用于定位元素（位置：绝对、位置：相对或位置：固定）。

如果不定义位置，元素将是静态的，因为这是块元素的默认位置。

M.

Answer 2

最好在 css 规则中为滑块定义 display: none;。 此外，将mouseenter 和mouseleave 绑定到container 将防止在鼠标离开图像并在滑块上移动时跳转slider。

$('.container').on("mouseenter", function() {
    $(".slider").slideDown();
  });
  $('.container').on("mouseleave", function() {
    $(".slider").slideUp("400");
  });

.container {
  width: 300px;
}
.image{
  height: 300px;
  width: 300px;
  background: #000000;
}
.slider {
  background-color: #333333;
  color: #ffffff;
  margin: -90px 0 0 0;
  height: 90px;
  width: 100%;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>
</div>