0

因此，我在此处的另一篇文章中找到了此脚本，并对其进行了更改以适合我的样式/站点，但它仅适用于 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/

4

6 回答 6

1

使用class而不是id.

ID 必须是唯一的

小提琴演示

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

阅读具有相同 id 属性的两个 HTML 元素：它到底有多糟糕？

于 2013-10-31T05:13:48.663 回答
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");
    });
});

小提琴

于 2013-10-31T05:15:58.843 回答
0

工作演示

您只能拥有元素的唯一 id 属性。

html

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

<div class="client" style="float:left;">
    <div class="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 () {
        $(this).find(".client_slider").animate({
            "bottom": "-240px"
        }, "slow");
    }).on("mouseleave", function () {
        $(this).find(".client_slider").animate({
            "bottom": "-320px"
        }, "fast");
    });
});

希望这会有所帮助，谢谢

于 2013-10-31T05:13:55.953 回答
0

它附加到一个 ID 而不是一个类。

将它改为一个类，它会正常工作。

于 2013-10-31T05:14:25.260 回答
0

它没有发生，因为您已将其附加id到 div。 id必须是唯一的。

改成类。

代码：

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

在这里更新了小提琴。

于 2013-10-31T05:16:30.847 回答
0

问题是您在 id 上调用 mouseenter 函数。将此代码替换为您的调用函数，它将起作用。我会说你将你的 id:clients 更改为一个类。

  $(function () {
        $('div').on("mouseenter", function () {
            $(this).children('div').animate({
                "bottom": "-240px"
            }, "slow");
        }).on("mouseleave", function () {
           $(this).find('div').animate({
                "bottom": "-320px"
            }, "fast");
        });
    });
于 2013-10-31T05:19:14.470 回答