1

我对 JavaScript 或 jQuery 不太擅长，但我试图在将鼠标悬停在<div>元素上时显示图像。问题是它也发生在其他人身上。

$(document).ready(function () {

    $("#event .event").hover(function () {
        $(".event img").show("slow");
    },
    $(".event img").mouseout(function () {
        $(".event img").hide("slow");
    }));

});

html代码：

<div id="event">
    <div class="event">
         <h4>name1</h4>

        <p>some text1</p>
        <img style='position:relative; display:none;' src='img1' alt='' />
    </div>
    <div class="event">
         <h4>name2</h4>

        <p>some text2</p>
        <img style='position:relative; display:none;' src='img2' alt='' />
    </div>
</div>

但是图像会同时出现，如果我有五个，或者所有五个..有帮助吗？

4

3 回答 3

1

函数的第二个参数$经常用于定义上下文。这意味着，您的选择器将相对于特定元素或选择器使用。

$(".event") // finds all .event elements
$(".event", this) // finds all .event elements within 'this'

考虑到这一点，我们可以修改您的代码以查看.event当前正在输入或存在的元素以找到合适的图像：

​$("#event .event").on({
    mouseenter: function(){
        $("img", this).show();
    },
    mouseleave: function(){
        $("img", this).hide();
    }
});​​​

这将一些逻辑绑定到与选择器匹配的每个元素#event .event。这些中的每一个都将有一个绑定到它们的mouseenter和mouseleave事件的处理程序。每当您悬停与选择器匹配的元素之一时，我们都会使用this关键字引用该特定元素。

如果您输入#event .event页面上的第一个元素，则this指该元素。同样，如果您退出该元素，this则表示该元素正在退出。回想一下这个响应的第一点，这意味着$("img", this)将针对元素中的每个图像引发mouseenterormouseleave事件开始。

此外，请仔细检查您对.hover();的使用。这个方法有两个参数，函数，分别在鼠标进入和鼠标离开时调用：

$("#event .event").hover( showImages, hideImages );

function showImages () {
    $("img", this).show();
}

function hideImages () {
    $("img", this).hide();
}

.hover或者您可以将它们作为匿名函数直接放在方法中：

$("#event .event").hover(
    function(){ $("img", this).show(); }, 
    function(){ $("img", this).hide(); }
);
于 2012-11-10T18:46:16.780 回答
0

尝试这个。IMO 这个解决方案更容易理解。

$(document).ready(function () {
    $("#event .event").hover(function () {
        $(this).find('img').show();
    }, function(){
       $(this).find('img').hide();
    });
});
于 2012-11-10T19:25:22.317 回答
0

您正在隐藏和显示所有图像，您需要使用this关键字仅定位当前元素，而不是全部，这是使用切换的另一个更简单的解决方案：

$(document).ready(function(){
    $("#event .event").on('mouseenter mouseleave', function() {
            $('img', this).toggle(e.type=='mouseenter');
    });
});
于 2012-11-10T18:42:26.503 回答