-1

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

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

在我对 jQuery 的理解中，当用户将鼠标悬停在 li 元素上时，会运行 hover() 函数中嵌入的第一个函数。第二个函数在鼠标离开 li 元素时运行。jQuery API 链接。然而，添加的脚本似乎根本没有做任何事情。

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

$("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;
}
4

5 回答 5

6

改用CSS：

li:hover {
    background-color:#525252
}
于 2013-06-06T13:27:58.783 回答
1

你不需要像 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;
}
于 2013-06-06T13:44:59.257 回答
1

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

$(document).ready(function () {
    $("li").hover(function () {
        $(this).css("background-color", "#525252");
    }, function () {
        $(this).css("background-color", "#FFF");
    });
});
于 2013-06-06T13:34:18.500 回答
0

等待 DOM 准备好或将脚本放在关闭 body 标记之前：

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

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

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

    function () {
        $(this).css("background-color", "#FFF");
    });
});
于 2013-06-06T13:30:05.980 回答
0

您在DOM完成加载之前调用您的 JavaScript 代码。像这样包装你的 JavaScript：

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

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

于 2013-06-06T13:30:32.973 回答