javascript - 一页上多个div悬停效果

Question

因此，我在此处的另一篇文章中找到了此脚本，并对其进行了更改以适合我的风格/网站，但它仅适用于 1 个 div。我想在同一页面上的多个 div 上使用它，但是当我复制 div 时，只有其中 1 个有效。它应该能够工作，因为所有 div 都被命名为相同的，还是我必须将每个 div 命名为不同的，为每个 div 单独的 css 并为每个 div 单独的脚本？我试图避免在不需要时添加所有编码，因为我将其设置为从帖子中提取并自动显示，而无需进入并编辑它的编码。

这是我现在正在使用的编码。左边的广告可以工作，但是当我将鼠标悬停在它上面时，我广告的任何其他广告都不起作用。

HTML

<div id="client" style="float:left;">
<div id="client_slider">
    <p>content...</p>
</div>
</div>

<div id="client" style="float:left;">
<div id="client_slider">
    <p>content...</p>
</div>
</div>

CSS

#client {
position: relative;
overflow:hidden;
background-color:#ffff00;
width: 320px;
height: 320px;
}
#client_slider {
width: 320px;
height: 320px;
bottom: -320px;
right: 0px;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
color:#fff;
}

脚本

$(function () {
$('#client').on("mouseenter", function () {
    $("#client_slider").animate({
        "bottom": "-240px"
    }, "slow");
}).on("mouseleave", function () {
    $("#client_slider").animate({
        "bottom": "-320px"
    }, "fast");
});
});

示例链接

http://jsfiddle.net/4yhKP/

Answer 1

ID 必须是唯一的，如果需要多个，请使用类。您还需要更改 jQuery 代码:

$(function () {
    $('.client').on("mouseenter", function () {
        $(this).children(".client_slider").animate({
            "bottom": "-240px"
        }, "slow");
    }).on("mouseleave", function () {
        $(this).children(".client_slider").animate({
            "bottom": "-320px"
        }, "fast");
    });
});

fiddle