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>

来源

2016-12-01 Stuart

你的jQuery选择不正确。你应该使用'$（this）.parent（）。find（“。slider”）。slideDown（“400”）;'相反，因为'$（this）'容器内没有'.slider'，在这种情况下是'.image'。但是如果你将鼠标悬停在滑块上，它就会消失。我不确定它是否是所需的行为......可能最好是将'mouseover' /'mouseout'事件绑定到容器上。 –

这是更好地定义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>

来源

2016-12-01 20:55:58 Banzay

感谢您的帮助，Banzay。这与马可的建议，使相对位置做了伎俩。 – Stuart

z索引仅适用于定位元素（位置：绝对的，位置：相对的，或位置是：固定）。

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

来源

2016-12-01 20:40:58

感谢Marko。这有助于让背景出现在图像上方。 – Stuart

JQuery SlideUp - 背景颜色背后图像

回答

相关问题