Jquery 鼠标悬停'；如果href设置为块，则无法工作

所以我有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>

---

将

显示

更改为

块

应该没有什么区别

我将您的代码粘贴到这里，它似乎可以工作：

你的问题可能在别处。你能复制它吗

另外，我不知道您是否对示例进行了概括，但我会避免只对selector

div

执行任何jQuery。给主包装器一个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);
    });
});

演示：

编辑：我在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);
    });

});

---

演示：

您可能既要更改悬停中的淡入顺序，又要以图像而不是锚元素为目标。进行以下更改：

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

---

真的吗？我看不到任何淡入淡出的效果，你在使用哪个版本的jQuery？等待以我为例？当我将鼠标悬停在图像上时，它会淡入，当我将鼠标移出时，它会淡入50%。这不是你所期望的吗？还有，你正在使用哪种浏览器？设置为$（'a img'）。悬停不会有帮助吗？你有一个双重淡入。链接在文档加载时衰减为50%，悬停时图像衰减为50%，所以鼠标悬停时图像衰减为25%。这是你想要的吗？这是工作，但另一个问题是，我希望我的照片是50%褪色时，文件准备好$（“.img_link”）.fadeTo（1,0.5）；如果我所有的img都有class=“img\u link”它不起作用…你能帮我吗？

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