gpt4 book ai didi

html - 导航上的 CSS 样式问题

转载 作者:行者123 更新时间:2023-11-28 04:17:01 26 4
gpt4 key购买 nike

我在设置基本导航的样式时遇到问题。

我希望导航菜单的颜色是灰色的,当它悬停在上面时会变成带有底部边框的绿色。它也会在悬停时跳来跳去。我试图添加 border-bottom: transparent;但我认为它正在被覆盖。我玩过移动代码,a 标签似乎是罪魁祸首,但我不确定如何解决它。因此所有的样式。

HTML

<body>
<div class="header">
<a href="#"><img class="Logo" alt="Rigare logo" src="logoweb_1.1.png"/></a>
<div class="nav">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Technical Capabilities</a></li>
<li><a href="#">Staff and Associates</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Products and Hire</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>

CSS

    .header {
padding-top: 16px;
}


.logo {
float: left;
}

.nav {
display: inline-block;
vertical-align:top;
margin: 0;
padding: 10px 0;
text-align: center;
color: #70B0A8;
background: #fff;
}

.nav li{
display: inline;
text-align: right;
color: #70B0A8;
font-size: 20px;
font-weight: 700;
margin-right: 60px;
height: 100px;
opacity: 0.6;
border-bottom: transparent;
}

.nav li:hover {
color: #97A6AA;
border-bottom: 1px solid #97A6AA;
cursor: pointer;
padding: 10px;
}

a {
text-decoration: none;
}

.nav a {
color: #70B0A8;
}

Here is a fiddle to see what I'm talking about.

最佳答案

你有定义

.nav a {
color: #70B0A8;
}

在你的 CSS 的末尾,它肯定会覆盖你的 :hover 效果,而且你还为 定义了 :hover 颜色>.nav li:hover { 而不是 .nav li:hover a { 这不是为 内的 a 标签定义悬停效果的正确方法李.

此外,您应该首先为您的 li 标签定义 border-bottompadding,而不是 :hover 以防止跳跃问题

您必须像下面的 Snippet 一样更改您的 CSS

代码片段

a {
text-decoration: none;
}

.header {
padding-top: 16px;
}

.logo {
float: left;
}

.nav {
display: inline-block;
vertical-align: top;
margin: 0;
padding: 10px 0;
text-align: center;
color: #70B0A8;
background: #fff;
}

.nav li {
display: inline;
text-align: right;
color: #70B0A8;
font-size: 20px;
font-weight: 700;
margin-right: 60px;
height: 100px;
opacity: 0.6;
padding: 10px;
border-bottom: 1px solid transparent;
}

.nav li a {
color: #70B0A8;
}

.nav li:hover {
border-bottom-color: #97A6AA;
cursor: pointer;
}

.nav li:hover a {
color: #97A6AA;
}
<body>
<div class="header">
<a href="#"><img class="Logo" alt="Rigare logo" src="logoweb_1.1.png" /></a>
<div class="nav">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Technical Capabilities</a></li>
<li><a href="#">Staff and Associates</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Products and Hire</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>

关于html - 导航上的 CSS 样式问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42436491/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com