如果href设置为块，鼠标悬停不起作用

Question

所以我有3张图片需要链接到其他页面，并且它在淡入淡出时悬停。 但我注意到，jQuery的影响将被禁用，一旦图像安排在CSS中的块。 和解决方案？

的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'); 
}); 

Answer 1

你可能想都改变你悬停褪色的顺序和目标图像，而不是锚元素。进行此更改：

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

jsFiddle example。

Answer 2

改变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/