具有相同id的多个项的jQuery效果

Question

我想将悬停渐变应用于ID为＃front-overlay的多个元素。此代码目前仅适用于具有该ID的第一个元素。谢谢你的帮助。

$("#front-overlay").mouseenter(function() {
$(this).fadeTo("fast", 0.8);
$(this).css("color","#fff");
});
$("#front-overlay").mouseleave(function() {
$(this).fadeTo("fast", 0.3);


Answer 1

您不能拥有多个具有相同ID的项目 如果这样做，它将无法正常工作。

相反，请使用类。

Answer 2

使用id="front-overlay"更改class="front-overlay"，然后使用以下代码（将＃符号更改为.for classe）

$(".front-overlay").mouseenter(function() {
    $(this).fadeTo("fast", 0.8);
    $(this).css("color","#fff");
});
$(".front-overlay").mouseleave(function() {
    $(this).fadeTo("fast", 0.3);
});

Answer 3

只需应用一点逻辑 - （上面的所有注释肯定都是正确的 - 每个页面只使用 一次，例如页眉，页脚等）。

如果jquery坚持这样的标准（希望其他人可以澄清这个？）那么请尝试以下方法：

$(".front-overlay").mouseenter(function() {
$(this).fadeTo("fast", 0.8);
$(this).css("color","#fff");
});
$(".front-overlay").mouseleave(function() {
$(this).fadeTo("fast", 0.3);`

然后，您当然必须将所有html id更改为class =“front-overlay”并记住还要更新您的css文件！