Question

我正在练习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;
            }

有什么建议吗？

Answer 1

将.active类添加到当前页面链接，并覆盖以下样式：

.nav li a.active, 
.nav li a.active:hover {
    /* Put your CSS declarations here, like: */
    text-shadow: none;
}

Answer 2

html代码中的一些更改

如果您的主页是最新的，请上课=＆＃34;有效＆＃34;在你的主菜单中。

<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;
}

Answer 3

我强烈推荐使用其他答案中的.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;
}

隐藏当前页面上的悬停效果

3 个答案: