JQuery SlideUp - 背景颜色背后图像
我正在使用JQuery slideUp/slideDown添加叠加到隐藏的图像，直到mouseover，然后从图像的底部向上滑动。JQuery SlideUp - 背景颜色背后图像
向上滑动的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>
这是更好地定义display: none;在CSS规则滑块。 也绑定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>感谢您的帮助，Banzay。这与马可的建议，使相对位置做了伎俩。 – Stuart
z索引仅适用于定位元素（位置：绝对的，位置：相对的，或位置是：固定）。
如果您未定义位置，则元素将为静态，因为这是块元素的默认位置。
M.
感谢Marko。这有助于让背景出现在图像上方。 – Stuart
你的jQuery选择不正确。你应该使用'$（this）.parent（）。find（“。slider”）。slideDown（“400”）;'相反，因为'$（this）'容器内没有'.slider'，在这种情况下是'.image'。但是如果你将鼠标悬停在滑块上，它就会消失。我不确定它是否是所需的行为......可能最好是将'mouseover' /'mouseout'事件绑定到容器上。 –