jQuery Hovery Opacity閃爍

我試圖創建一個懸停效果，它將底層div帶到前面。jQuery Hovery Opacity閃爍

將底層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>

來源

2011-11-28 siouxfan45

我相信這是因爲當你將鼠標懸停在DIV，你把跨度到前面;這使得你的鼠標技術上的跨度，這就像懸停* div的div。所以它消失了。 – Chad

@Chad：你應該把它當作答案，因爲它是正確的。 – rossipedia

將來，請不要問一個需要用戶訪問您的個人網站進行調試的問題。圖片始終是首選，因爲您不會被標記爲垃圾郵件，並且您的問題不會因被本地化而被封閉。謝謝。 – Will

使用重要的往往導致問題...這裏它的工作原理通過刪除這一條線就很好：

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

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

來源

2011-11-28 18:42:23 Zac

下面是來自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); 
});

希望它有幫助...

來源

2011-11-28 18:37:38 ptriek

試試這個

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

});

來源

2011-11-28 18:37:46

你可以嘗試設置淡入鼠標移開和鼠標懸停事件影響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 
    }); 
});

來源

2011-11-28 18:39:05

發生這種情況是因爲當您將鼠標懸停在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。

來源

2011-11-28 18:43:53 Chad

擺脫懸停造型

http://jsfiddle.net/9aFqz/

來源

2011-11-28 18:51:03 thecodeassassin

jQuery Hovery Opacity閃爍

回答

相關問題