Question

我在我的网站（click here and scroll down to images with coloured blocks）上添加了一个jQuery鼠标悬停功能。我注意到虽然我玩过Z-index但是悬停状态图像不可见。是什么导致了这个问题？

以下是我的代码片段。

<div class="shirt-block" style="background:#333334;">
    <figure>
        <img class="shirt col-img-inner" src="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);
});

Answer 1

只需替换

.shirt-hover {

与

.shirt:hover {

所以应该是这样的

.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;
  }

Answer 2

伪选择器的工作方式如下：.shirt:hover，.shirt-hover无法正常工作。

Answer 3

伪选择器始终使用冒号（：），从不破折号（ - ）。因此，shirt:hover可以替代。

您可以使用.hover和.mouseenter代替jQuery .mouseleave。

Answer 4

这适用：＆gt;＆gt;而不是：$('.shirt-hover').hover(...)＆lt;＆lt;

$('.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)});
});

然后在z-index:100;的CSS中移除.shirt-hover它没用，并让它通过底部div。

鼠标悬停不使用jQuery工作

4 个答案: