Question

以下JQuery片段仅适用于ul中的一个li项目。当我将鼠标悬停在列表中的其他项目上时，它将无法正常工作。

$(document).ready(function() {



$("#link").hover(function() {
    $(this).animate({ color:'#fe57a1'}, 100);
}, function() {
    $(this).animate({ color: '#fff'}, 300);

});
});

html如下：

 <div class="col span_6 main-menu">
                    <ul>
                        <li><a id="link" href="about.php">About</a></li>
                        <li><a id="link" href="soon.php">Place</a></li>
                        <li><a id="link" href="soon.php">Shop</a></li>
                        <li><a id="link" href="blog.php">Blog</a></li>
                    </ul>
                </div>

Answer 1

HTML

   <div class="col span_6 main-menu">
                        <ul>
                            <li><a class="link" href="about.php">About</a></li>
                            <li><a class="link" href="soon.php">Place</a></li>
                            <li><a class="link" href="soon.php">Shop</a></li>
                            <li><a class="link" href="blog.php">Blog</a></li>
                        </ul>
                    </div>

的Javascript

$(document).ready(function() {



$(".link").hover(function() {
    $(this).animate({ color:'#fe57a1'}, 100);
}, function() {
    $(this).animate({ color: '#fff'}, 300);

});
});

您不应该为多个元素使用相同的ID

Answer 2

id s每页只能使用一次。您需要将“链接”更改为类：

$('.link'). ...

<a class="link"> ...

Answer 3

ID（例如您的id="link"应该是唯一的 - 应该只有一个具有相同ID的元素。尝试将这些标记更改为class="link"，然后使用选择器$(".link").hover选择所有这些元素。

Answer 4

＆＃34;连结＆＃34;应该是元素的类而不是id。如果您有多个具有相同ID的元素，JavaScript将只找到第一个元素。

JQuery动画功能仅适用于li中的第一个孩子

4 个答案: