Question

我在无序列表中有4张图片。理想情况下，我希望能够将所有列表项加载到数组中并检查以查看当前正在悬停的列表项。

我知道使用jQuery is（）函数我可以检查哪个处于：悬停状态。如何将此检查应用于该列表数组中的所有项目？

<ul class="image-list">
    <li class="image-item"><img src="/image1.jpg"/></li>
    <li class="image-item"><img src="/image1.jpg"/></li>
    <li class="image-item"><img src="/image1.jpg"/></li>
    <li class="image-item"><img src="/image1.jpg"/></li>
</ul>

感谢您的帮助。

DIM3NSION

Answer 1

使用mouseover()功能：

// Add mouseover event to all your image-items
$('.image-list > .image-item').mouseover(function() {
    // $(this) is your hovered image-item object
    alert($(this).find('img').attr('src'));    
});

工作jsfiddle

Answer 2

演示：http://jsfiddle.net/GCu2D/758/

JS：

$(function () {
    var li = $("ul li"); //get all li. All li are stored in an array.
    $(document).on("mouseover", "ul li.image-item", function (e) {
        var ele = $(this); //get currently hovered li.
        var item = li.index(ele); //get the index of the currently hovered li in that array
        console.log(item); //this logs the index. Using this index, do whatever you want with that item.
    });
});

检查列表项悬停状态以触发操作 - jQuery

2 个答案: