0

我正在练习 HTML 和 CSS，但似乎无法弄清楚这一点。我有一个包含 5 个项目的水平菜单。我有一个悬停状态分配和 css 以突出显示导航栏上的当前页面。我想要的是当您将鼠标悬停在当前页面上时，它不会产生悬浮效果。这是涉及的css

                .nav {
                width: 960px;
                height: 40px;
                background-color: #6d6e70;
                margin: 210px auto;
                position: absolute;
            }
            .nav li {
                width: 192px;
                text-align: center;
                display: inline;
                float: left;
                line-height: 40px;
                display: block;
                margin: auto;
                padding: 0px;
            }
            .nav li a {
                text-decoration: none;
                color: #434244;
                font-size: 20px;
            }
            .nav li a:hover {
                color: #fff;
                text-shadow: 0px 0px 5px #fff;
            }
            body#home a#homeNav,
            body#products a#productsNav,
            body#aboutUs a#aboutUsNav,
            body#contactUs a#contactUsNav,
            body#order a#orderNav {
                color: #6d6e70;
                background: #434244;
                padding: 5px 6px 6px 6px;
            }

有什么建议么？

4

3 回答 3

2

向当前页面链接添加一个.active类，并覆盖如下样式：

.nav li a.active, 
.nav li a.active:hover {
    /* Put your CSS declarations here, like: */
    text-shadow: none;
}
于 2013-08-20T21:13:05.767 回答
1

您的 html 代码中的一些更改

如果您的主页是最新的，请在您的主页菜单中设置一个 class="active"。

<li><a href="#" class="active">HOME</a></li>

在您的 CSS 代码中添加一个类 .active

.nav li a.active, 
.nav li a.active:hover {
    text-shadow: 0px 0px 5px #ccc;
    color:#cccccc;
}
于 2013-08-20T21:29:26.330 回答
1

我强烈建议使用.active其他答案中所述的课程

如果由于某种原因您无法执行某些服务器端或客户端处理来添加.active类，您可以通过您在原始代码中发布的 ID 进行一些定位。这适用于无法访问任何服务器端或客户端脚本的静态站点。

这种方法不是最好的，如果可能的话，应该用其他方法来补充。如果您有很多页面，它将变得笨拙，因为您必须将每个页面添加到 CSS 并且非常多余，但是如果您不能通过前面所述的方式来做到这一点，它确实可以工作。

您需要做的是结合使用您的页面 ID 和链接 ID。

http://jsfiddle.net/GJ6Ft/2/

（忽略 jsFiddle 中的 jQuery）

示例 HTML

<ul>
    <li id="OneLink"><a href="#">One</a></li>
    <li id="TwoLink"><a href="#">Two</a></li>
    <li id="ThreeLink"><a href="#">Three</a></li>
    <li id="FourLink"><a href="#">Four</a></li>
    <li id="FiveLink"><a href="#">Five</a></li>
</ul>

CSS

/* Current navigation link color */
#One #OneLink a,
#Two #TwoLink a,
#Three #ThreeLink a,
#Four #FourLink a,
#Five #FiveLink a {
    color: red;
}
/* Default link background color */
ul > li {
    background-color: blue;
}
/*  Don't highlight current link background color - same as original */
#One #OneLink:hover,
#Two #TwoLink:hover,
#Three #ThreeLink:hover,
#Four #FourLink:hover,
#Five #FiveLink:hover {
    background-color: blue;
}
/* When any link is hovered, change background color */
ul > li:hover {
    background-color: black;
}
/* Default link color */
ul li > a {
    color: white;
}
于 2013-08-20T21:51:53.200 回答