Question

我正在尝试创建一个悬停效果，将底层div带到前面。

将底层div放到前面已经通过z-index解决了。但我的不透明度变化导致眨眼。当用户将鼠标悬停在它上面时，它应该保持在0％，然后当它们将光标移开时，它会变回100％。有人知道我做错了吗？

底层div是.under，顶部的div是.img

#portfolio_content .img a { }
#portfolio_content .img a:hover { }
#portfolio_content .img {
    display:block;
    float:left;
    height:210px;
    margin:0 35px 35px 0!important;
    overflow:hidden;
    padding:0;
    width:307px
}
#portfolio_content .img img {
    display:block;
    position:absolute!important;
    overflow:hidden;
    z-index:3!important
}
#portfolio_content .img img:hover { z-index:1!important }
#portfolio_content .img .title, #portfolio_content .img .title a {
    font-size:22px;
    margin:100px 0 10px 0;
    float:left!important;
    width:307px;
    text-align:center;
    position:relative!important
}
.desc {
    font-size:13px;
    display:block;
    text-align:center!important;
    margin:0 auto!important;
    width:307px
}
.under {
    z-index:2!important;
    display:inline;
    position:absolute;
    width:307px;
    height:210px;
    background:transparent
}
.under:hover { z-index:4!important }

的jQuery

<!-- Hover Opacity -->
<script type="text/javascript">
$(document).ready(function(){
    $("#portfolio_wrap .img img").hover(function(){
        $(this).fadeTo("slow", 0.0); // This should set the opacity to 100% on hover
    },function(){
        $(this).fadeTo("slow", 1.0); // This should set the opacity back to 60% on mouseout
});
});
</script>

Answer 1

使用！important经常会导致问题......只需删除这一行就可以了。

#portfolio_content .img img:hover { z-index:1!important }

http://jsfiddle.net/sushik/yJj2Q/

Answer 2

发生这种情况是因为当你将鼠标悬停在div上时，你会将跨度带到前面;这使你的鼠标技术上在跨度上，这就像悬停在div之外。所以它渐渐消失了。

您可以淡出图像并淡化叠加层，而不是使用z-index。确保图像z-index始终大于覆盖图像（听起来很傻），就像你正在悬停图像一样。

修改

另一种选择是抓住span.img的悬停并淡出适当的东西：

$('span.img').hover( function(){ $('img', this).fadeTo('slow', 0); //Fade out the image $('span.under', this).fadeTo('slow', 1); //Fade in overlay }, function(){ $('img', this).fadeTo('slow', 1); //Fade in the image $('span.under', this).fadeTo('slow', 0); //Fade out overlay } );

以下是此方法的工作jsFiddle。

Answer 3

以下是Themeforward示例链接中的代码：

jQuery('#theme-container .post-thumb').hover( function () {
    jQuery(this).find('img').stop().animate({opacity: 0.1}, 300);
    jQuery(this).find('.theme-overlay .link-wrap').stop().animate({opacity: 1}, 300);
}, function () {
    jQuery(this).find('img').stop().animate({opacity: 1}, 300);
    jQuery(this).find('.theme-overlay .link-wrap').stop().animate({opacity: 0}, 300);
});

希望它有所帮助...

Answer 4

试试这个

$(document).ready(function(){
    $("#portfolio_wrap .img img").mouseover(function(){
        $(this).fadeTo("slow", 0.0); // This should set the opacity to 100% on mouseover
    });

     $("#portfolio_wrap .img img").mouseleave(function(){
        $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on mouseleave
    });

});

Answer 5

您可以尝试在mouseOut和mouseOver事件http://api.jquery.com/mouseout/

中设置淡入淡出效果

类似的东西：

 $(document).ready(function(){
    $("#portfolio_wrap .img img").mouseover(function(){
        $(this).fadeTo("slow", 0.0); // This should set the opacity to 100% on mouseover
    });

    $("#portfolio_wrap .img img").mouseleave(function(){
        $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on mouseleave
    });
});

Answer 6

摆脱悬停样式

http://jsfiddle.net/9aFqz/

jQuery Hover Opacity闪烁

6 个答案: