Question

我的javascript存在问题。

当我将鼠标悬停在div上时，我正在尝试创建一个淡化白/黑png文件的javascript。但问题是我有几个divs和images，还有一个class。

我怎样才能让它发挥作用？

将它全部放在JSFiddle中： http://jsfiddle.net/auURQ/61/

非常感谢所有帮助： - ）

<div class="aBlock first">
<div class="eTop">
    <img src="http://www.designduck.dk/portfolio/img/project1.jpg" alt="project1">
    <img class="overlay" src="http://www.designduck.dk/portfolio/img/white.png" width="360" height="135" alt="whitebox">
    <img style="margin-left:43px;;margin-top:35px;" src="http://www.designduck.dk/portfolio/img/wordpress.png" width="270" height="60" alt="wordpress">
</div>

$(document).ready(function () {
$(".overlay").show();
$('.eTop').hover(

function () {
    $('.overlay').fadeOut('slow');
},

function () {
    $('.overlay').fadeIn('slow');
});

}）;

Answer 1

如果我做对了，你希望动画只出现在当前悬停的图像上。为此，您需要添加以下代码：

$(document).ready(function () {
$(".overlay").show();
$('.eTop').hover(

function () {
    $(this).children('.overlay').fadeOut('slow'); // selects element with class     .overlay that is direct child of div that is currently hovered
},

function () {
    $(this).children('.overlay').fadeIn('slow');
});
});

这是更新的jsfiddle - http://jsfiddle.net/auURQ/71/

Answer 2

首先使用$（this）来查找特定的div.eTop，然后找到包含的图像。

$(document).ready(function () {
    $(".overlay").show();
    $('.eTop').hover(

    function () {
        $(this).find('.overlay').fadeOut('slow');
    },

    function () {
       $(this).find('.overlay').fadeIn('slow');
    });
});

多个div框，带有一个类的图像。一次只淡化一张图像？

2 个答案: