Question

在this page 上，您会看到我的页面。我做了一个菜单。我想通过突出显示悬停链接来更清楚地说明此菜单是一个菜单。虽然我通常会使用JavaScript，但jQuery听起来更简单，因为它有.hover。因此，为了突出显示列表中的元素，我添加了以下脚本：

<script>
    $("li").hover(
        function(){
            $(this).css("background-color", "#525252");
        },
        function() {
            $(this).css("background-color", "#FFF");
        }
    );
</script>

在我对jQuery的理解中，嵌入在hover（）函数中的第一个函数是在用户将鼠标悬停在li元素上时运行的。第二个函数在鼠标离开li元素时运行。 jQuery API-link。但添加的脚本似乎根本没有做任何事情。

我的第一次尝试是改变第一行

$("li")

因为这可能不是正确的方法。这是因为它是ul li所以我尝试了ul li而不仅仅是li。

第二个解决方案是使用addClass，但是让另一个类对我来说听起来有点多余。所以我决定不使用它。

最后，我尝试添加一个警报，以查看代码是否在悬停时完全运行。情况就是这样。当我在代码中添加警报并悬停在li元素上时，未触发警报。所以据我所知，错误的代码只有一行：

$("li").hover()

但我还没有找到这里究竟有什么问题。

菜单的HTML代码如下：

<div id="menu">
    <ul>
        <li><strong><em><u>Main Menu</u></em></strong></li>
        <li onclick="moveDiv('home');">Home</li>
        <li onclick="moveDiv('profile')">Profile</li>
        <li onclick="moveDiv('news')">News</li>
        <li onclick="moveDiv('forums')">Forums</li>
        <li onclick="moveDiv('webshop')">Web Shop</li>
        <li onclick="moveDiv('status')">Status</li>
    </ul>
</div>

CSS表格：

#menu ul li {
    list-style-type: none;
    margin-top: 10px;
    clear: left;
    cursor: pointer;
}
#menu ul {
    margin: 0px;
    padding: 0px;
    color: #525252;
}

#menu ul li a {
    text-decoration: none;
    color: #525252;
}

Answer 1

改为使用CSS：

li:hover {
    background-color:#525252
}

Answer 2

像其他人说的那样，等待DOM完成加载。您可以将脚本放在页面的末尾，或者更强大的解决方案是将代码包装在$(document).ready()函数中，如下所示：

$(document).ready(function () {
    $("li").hover(function () {
        $(this).css("background-color", "#525252");
    }, function () {
        $(this).css("background-color", "#FFF");
    });
});

Answer 3

你不需要像jQuery这样的开销。 CSS通过它的伪类具有一些行为特征：http://jsfiddle.net/T4aNf/

HTML

<ul id="menu">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
</ul>

CSS

#menu li a {
    background: red;
}
#menu li a:hover {
    background: green;
}

Answer 4

等待DOM准备就绪，或者在关闭body标签之前放置脚本：

（我检查了你的源代码，是的，这是你的问题。你在头部设置它。）

$(function () {
    $("li").hover(

    function () {
        $(this).css("background-color", "#525252");
    },

    function () {
        $(this).css("background-color", "#FFF");
    });
});

Answer 5

在<{3}}完成加载之前，您正在调用JavaScript代码 。像这样包装你的JavaScript：

<script> $(function(){ $("li").hover( function(){ $(this).css("background-color", "#525252"); }, function() { $(this).css("background-color", "#FFF"); } ); }); </script>

$()是jQuery DOM函数的简写。

使用jQuery突出显示'ul'中的'li'元素

5 个答案: