JQuery SlideUp - 画像の背後の背景色

Question

JQuery slideUp/slideDownを使用して、マウスオーバーするまで非表示にしてから画像の下からスライドする画像にオーバーレイを追加しています。

divには背景色が付いていますが、画像の上には表示されません。後ろに表示されます（テキストは画像の上に表示されますが、私が設定したマージンのためにdivの背景色の端）。 Z-インデックスは既に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

それは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>

Answer 2

z屈折率は、位置決め要素（絶対位置：相対、又は位置：固定された位置）で動作します。

位置を定義しないと、要素は静的になります。これはブロック要素のデフォルト位置です。

M.