Question

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

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

有什么想法吗？谢谢！

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

如果没有定义位置，则元素将是静态的，因为它是块元素的默认位置。

微米。

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

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

2 个答案: