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 - 背景顏色背後圖像

回答

相關問題