鼠标悬停不工作使用jQuery

Mouse over hover not working using jQuery

本文关键字：jQuery 工作 悬停 鼠标      更新时间：2023-09-26

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

直接替换

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

可以:>>代替:$('.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。

伪选择器是这样工作的:.shirt:hover, .shirt-hover永远不能工作

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

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

相关文章：