JQuery SlideUp - Hintergrundfarbe hinter Bild

Question

Ich verwende JQuery slideUp/slideDown, um ein Bild zu einem Bild hinzuzufügen, das bis zum Mouseover ausgeblendet ist und dann vom unteren Bildrand nach oben gleitet.

Das div, das nach oben gleitet, erhält eine Hintergrundfarbe, aber es erscheint nicht über dem Bild, es erscheint dahinter (der Text wird oben auf dem Bild angezeigt, aber ich kann nur die Unterseite sehen Rand der Hintergrundfarbe des Divs wegen der Ränder, die ich einstelle). Z-Index ist bereits auf 100 gesetzt.

Irgendwelche Ideen? Vielen Dank!

(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

Es ist besser display: none; für Schieber in CSS-Regel zu definieren. Auch zu binden mouseenter und mouseleave zu container verhindert Springen slider, wenn Maus Bild verlassen und über Schieberegler bewegt.

$('.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-Index funktioniert nur auf positionierte Elemente (Position: absolute, Position: relative oder Position: fest).

Wenn Sie die Position nicht definieren, ist das Element statisch, da dies die Standardposition für Blockelemente ist.

M.