Question

我的导航栏有黑色背景和白色文字。悬停在上面时，文本变为红色。但是，当用户在选择页面上时，特定背景将变为红色。但是悬停在将文本更改为红色。我想要它，以便当用户在主页上，并将它们悬停在主页按钮上时，文本不会变为红色。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TL Custom Printing</title>

<link rel="stylesheet" type="text/css" href="stylesheet.css" />


</head>

<body>

<div id="topbar">
</div>

<div id="navbar">
    <div id="navbtn">
        <ul>
            <li><a href="index.php" style="background-color:#F00;">Home</a></li>
            <li><a href="custom.php" >Custom Printing</a></li>
            <li><a href="store.php">Products</a></li>
            <li><a href="gallery.php">Gallery</a></li>
            <li><a href="about.asp">About</a></li>
            <li><a href="contact.asp">Contact Us</a></li>
        </ul>
    </div>
</div>

<div id="logo">
    <img src="testlogo.png" alt="logo">
</div>



</body>

</html>

CSS：

#navbtn {
    width:100%;
    Margin:20px;
    white-space: nowrap;
    text-align:center
}

ul {
    width:100%;
    list-style:none;
    margin:0;
    padding:0;
    display: inline-block;
    padding-top: 2.25em;
}

li {
    width: 140px;
    display: inline-block; 
}

a {
    text-align:center;
    font-size: 1.25em;
    padding:8px 0;
    display:block;
    width:100%;
    text-decoration:none;
    color:#FFF;
    border-top-left-radius:8px;
    border-top-right-radius:8px;

}

a:hover {
    color:#F00;
    background-color:#000;
}

Answer 1

您可以使用有效课程轻松解决此问题：JSFiddle

<li><a href="index.php" class="active">Home</a></li>

a.active {
    background-color:#F00;
}
a.active:hover {
    color: #fff;
}

我还将您的有效标签背景颜色添加到.active类中，删除了内嵌样式

Answer 2

您可以添加：

<style type="text/css">
    a:hover {
    color:#FFF !important;
    background-color:#000;
    }
</style>

在你的html页面中，但你的“家”，所以它将重写主css表。

否定悬停在导航栏中的一个按钮的效果

2 个答案: