Question

我想要一个导航栏，例如在页面index.html上标记带有文本Home的导航栏链接，其背景与悬停效果相同。

按照我的代码..

CSS：

.header {
border-bottom: 6px solid black; 
padding: 20px 10px 20px 10px;
background: #D11B1B; 
position:fixed; 
top:0; 
left:0; 
z-index:2000; 
width: 100%;
height: 60px;
}

.nav ul a {
background-color: none!important;
padding: 20px 2px 20px 0px;
font-size: 40px;
}

.nav ul a:hover {
background-color: black!important;
border: 1px solid white;
padding: 40px 0px 0px 0px;
width: 100px;
}

HTML：

<header class="header">
<div class="nav">
<ul>
<a href="index.html" class="nav-active">Home</a>
<a href="werbung.html">Werbung</a>
</ul>
</div>
</header>

THX。

Answer 1

如果要在每个页面的导航栏中创建特定的按钮/链接，则可以指定给链接到当前页面的按钮一个“活动”类。

<body>
<div class="nav">
<a href="index.html" class="active">Home</a>
<a href="page2.html">Home</a>
<a href="page3.html">Home</a>
</div>
</body>

然后在您的CSS中，为“ .nav a.hover”指定特定样式，以使活动页面在导航栏上看起来有所不同。您可以添加所需的任何样式，例如添加底部边框，更改颜色或执行任何操作。

.nav a.active{
color:red;
}

如果要在将鼠标悬停在按钮上时使按钮改变颜色，请使用“ .nav a：hover”并添加所需的样式。

.nav a:hover {
color:dark-blue;
}

Navbar：活动网站

1 个答案: