Question

我想对图片进行悬停效果。这很好用！但我也有一个文本在图像的顶部，在div中。当我悬停它时，背景中的图像会返回..

简单地说，只有当鼠标悬停在文本或图像上时，我才希望在图像上有悬停效果..

您可以在此处查看其工作原理：http://notre.co/nav

$(document).ready(function() {
    $('img').each(function() {
       $(this).hover(function() {
           $(this).stop().animate({ opacity: 0.3 }, 200);
       },
       function() {
           $(this).stop().animate({ opacity: 1.0 }, 800);
       });
    });
});

Answer 1

看到你有这种结构：

<div class="image">
    <a href="..." target="_blank">
        <img src="..." border="0" style="opacity: 1; ">
    </a>
    <div class="text">...</div>
</div>

您应该将悬停事件附加到父.image div而不是：

$('.image').hover(function () {
    $(this).find('img').stop().animate({ opacity: 0.3 }, 200);
}, function () {
    $(this).find('img').stop().animate({ opacity: 1.0 }, 200);
});

请注意，我没有包含.each()，因为默认情况下，jQuery会在附加事件处理程序时迭代每个元素（实际上，对于大多数操作）。

正如mVChr在评论中所提到的，如果您希望在将鼠标悬停在“作者”文字上时效果正常，则'.image'选择器应更改为'ul.sc_menu li'。< / p>

Jquery悬停效果

1 个答案: