Myš nad vznášaním nefunguje pomocou jQuery - javascript, jquery, html5, css3

Na svojom webe mám zabudovanú funkciu jQuery mouse over hover (kliknite sem a prejdite nadol na obrázky s farebnými blokmi). Všimol som si, že obraz o stave hover nie je viditeľný, hoci som sa pohrával s indexom Z. Čo spôsobuje tento problém?

Nižšie je uvedený útržok môjho kódu.

<div class="shirt-block" style="background:#333334;">
<figure>
<img class="shirt col-img-inner" src="/images/img/B0713011sf2.jpg" alt="alt"/>
</figure>
</div>

.shirt-block {
width:47%;
float:left;
margin:0; padding:0;
margin-left:2%;
min-width:200px;
max-width:600px;
position:relative;
}

.shirt-block > figure { margin:0; padding:0; height:100%; position:absolute; top:0; right:0; width:100%; }


.shirt-sizer { width:100%; /* same as figure width */ }

.shirt {
width:100%;
position:absolute;
top:0;
right:0;
}

.shirt-hover {
background:url(http://www.lybstore.com/img/home-hover-bg.png);
background-size:cover;
position:absolute;
top:0; right:0;
z-index:100;
width:100%;
height:100%;
opacity:0;
}


$("figure").append("<div class="shirt-hover"/>");

var $sizer = $("<img/>",  {src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF8AAABkCAMAAADXLxypAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAACBJREFUeNrtwTEBAAAAwiD7p14Hb2AAAAAAAAAAAABcAiWAAAEKyWyqAAAAAElFTkSuQmCC"}).addClass("shirt-sizer");

$(".shirt-block").append($sizer);

$(".shirt-hover").hover(function(){
$(this).stop().animate({opacity:1},200);
},function(){
$(this).stop().animate({opacity:0},200);
});

odpovede:

Toto funguje: >> namiesto: $(".shirt-hover").hover(...) <<

$(".shirt-block img").mouseenter(function(){
var $imgHover = $(this).next(".shirt-hover");
$imgHover.width($(this).width()).height($(this).height()).stop().animate({opacity:1},200);
});
$(".shirt-hover").mouseout(function(){
$(this).stop().animate({opacity:0},200,function(){$(this).height(0)});
});

A odstrániť: z-index:100; v CSS pre .shirt-hover je to zbytočné a prinútiť ho prejsť spodnou div.

Stačí nahradiť

.shirt-hover {

s

.shirt:hover {

Malo by to tak byť

.shirt:hover {
background:url(http://www.lybstore.com/img/home-hover-bg.png);
background-size:cover;
position:absolute;
top:0; right:0;
z-index:100;
width:100%;
height:100%;
opacity:0;
}

Selektory pseudo fungujú takto: .shirt:hover , .shirt-hover nikdy nemohol fungovať.

Pseudo selektory vždy použite hrubého čreva (:) nikdy pomlčka (-). Z tohto dôvodu shirt:hover bude fungovať ako náhrada.

Namiesto jQuery .hover, môžete použiť .mouseenter a .mouseleave.