如果href設置爲塊，鼠標懸停不起作用

所以我有3張圖片需要鏈接到其他頁面，並且它在淡入淡出時懸停。但我注意到，jQuery的影響將被禁用，一旦圖像安排在CSS中的塊。和解決方案？如果href設置爲塊，鼠標懸停不起作用

的CSS：

div { 
display: none; 
width: 600px; 
margin: auto; 
} 

.row_1 img{ 
    width: 300px; 
    height: 300px; 
} 

.row_2 img{ 
    width: 150px; 
    height: 150px; 
} 

.row_1, 
.row_2{ 
    display: inline-block; 
} 

.row_2 img{ 
    display: block; 
} 
.row_1 img{ 
    display: block; 
}

的HTML代碼：

<div> 



<h2>Blog</h2> 




<div class ="row"> 

<span class ="row_1"> 
<a href="#"><img src="image/under.png" /></a> 
</span> 

<span class ="row_2"> 
<a href='#'><img src="image/under.png" /></a> 
<a href="#"><img src="image/under.png" /></a> 
</span> 

</div> 


</div>

jQuery的：

$(document).ready(function(){ 
    $('a').fadeTo(1,0.5); 


    $('a').hover(
     function() { 
     $(this).fadeTo('slow',1); 
     }, 
     function() { 
     $(this).fadeTo('slow',0.5); 
     } 
    );  

}); 

$(document).ready(function(){ 
$('div').fadeIn('slow'); 
});

來源

2012-04-16 qwr qwr

設置爲$（'img'）。懸停不會幫助嗎？ – Kamil 2012-04-16 17:33:51

你可能想都改變你懸停褪色的順序和目標圖像，而不是錨元素。進行此更改：

$('a').hover(
    function() { 
     $('img',this).fadeTo('slow', 0.5); 
    }, 
    function() { 
     $('img',this).fadeTo('slow', 1); 
});

jsFiddle example。

來源

2012-04-16 17:33:36 j08691

你已經有了兩次褪色。該鏈接在文檔加載時褪色到50％，並且在懸停時將圖像淡化50％，因此在鼠標懸停時最終得到25％的圖像。這是你的意圖嗎？ – 2012-04-16 17:41:34

這項工作，但另一個問題是，我希望我的圖片在文檔準備就緒後褪色了50％。 $（「。img_link」）。fadeTo（1,0.5）; 如果我的所有圖片都有class =「img_link」它不起作用...你能幫我嗎？ – 2012-04-16 17:51:41

Nvm，我解決了它。非常感謝！ – 2012-04-16 17:53:40

改變display到block不應該有所作爲。

我在這裏粘貼您的代碼，它似乎工作：

http://jsfiddle.net/jtbowden/cG8c9/

你的問題可能出在其它地方。你能在jsfiddle重現嗎？另外，我不知道你是否正在推廣你的例子，但我會避免在選擇器div上做任何jQuery。給你的主包裝一個ID並使用它。此外，在你淡出效果添加.stop()，否則你將得到循環行爲，如果你mousein /出得太快：

$(document).ready(function() { 
    $('a').fadeTo(1, 0.5); 
    $('#wrapper').fadeIn('slow'); 

    $('a').hover(function() { 
     $(this).stop().fadeTo('slow', 1); 
    }, function() { 
     $(this).stop().fadeTo('slow', 0.5); 
    }); 
});

演示：http://jsfiddle.net/jtbowden/cG8c9/1/

編輯：我在IE瀏覽器測試，看到褪色根本不適用於鏈接。你需要做的衰落上的圖像在這種情況下：

$(document).ready(function() { 
    $('img').fadeTo(1, 0.5); 
    $('#wrapper').fadeIn('slow'); 

    $('a').hover(function() { 
     $('img', this).stop().fadeTo('slow', 1); 
    }, function() { 
     $('img', this).stop().fadeTo('slow', 0.5); 
    }); 

});

演示：http://jsfiddle.net/cG8c9/2/

來源

2012-04-16 17:30:12

真的嗎？我在你的鏈接上看不到任何淡入淡出效果 – 2012-04-16 17:32:52

你使用的是哪個版本的jQuery？等待。在我的例子？當我將鼠標懸停在圖像上時，它會淡入，當我鼠標移出時，它會消失到50％。這不是你所期望的嗎？ – 2012-04-16 17:34:32

另外，您使用的瀏覽器是？ – 2012-04-16 17:43:07

如果href設置爲塊，鼠標懸停不起作用

回答

相關問題