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

Question

所以我有 3 张图片需要链接到其他页面，并通过悬停淡入。但是我注意到一旦图像在 CSS 中排列成一个块，jquery 影响就会被禁用。和解决方案？

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

更改displaytoblock不应该有所作为。

我在这里粘贴了你的代码，它似乎工作：

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

您的问题可能出在其他地方。你能在jsfiddle复制它吗？

另外，我不知道您是否在为您的示例进行概括，但我会避免仅在 selector 上执行任何 jQuery div。给你的主包装一个 ID 并使用它。另外，.stop()在淡入淡出效果之前添加，否则如果鼠标移入/移出太快会出现循环行为：

$(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/

Answer 2

您可能希望同时更改悬停时的淡入顺序，并以图像而不是锚元素为目标。进行此更改：

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

jsFiddle 示例。