-1

我在我的网站上集成了一个 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);
});
4

4 回答 4

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;
  }
于 2013-06-01T10:31:45.650 回答
0

伪选择器总是使用冒号 ( : )，而不是破折号 ( - )。因此，shirt:hover将作为替代品。

代替 jQuery 的.hover，你可以使用.mouseenterand .mouseleave。

于 2013-06-01T10:52:36.543 回答
0

这有效：>> 而不是：$('.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)});
});

并删除：z-index:100; 在 CSS 中因为.shirt-hover它是无用的，并使其通过底部 div。

于 2013-06-01T10:57:35.810 回答
0

伪选择器是这样工作的 : .shirt:hover，.shirt-hover永远无法工作。

于 2013-06-01T10:32:45.547 回答