导航上的CSS样式问题
[英]CSS styling issue on nav
问题描述
I am having trouble styling a basic nav. 
我在设计基本导航时遇到麻烦。
I would like the nav menu colour to be grey and when it is hovered over turns to the green colour with a bottom border. 我希望导航菜单颜色为灰色，并且将其悬停在带有底部边框的绿色上。 It also jumps around on hover. 它也会在悬停时跳来跳去。 I tried to add in border-bottom: transparent; 我尝试在border-bottom中添加：透明； but I think it is being overridden. 但我认为它已被覆盖。 I have played about moving the code and the a tag seems to be the culprit but I am not sure how to solve it. 我曾经玩过移动代码，而标签似乎是罪魁祸首，但我不确定如何解决它。 Hence all the styles. 因此，所有样式。
HTML 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 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. 这是摆弄我正在谈论的事情的小提琴。
4 个解决方案
解决方案1
0 2017-02-24 10:46:44
The padding on your hover style was causing it to jump around. 悬停样式上的填充导致其跳来跳去。
Replace your .nav li:hover with the below. 将您的.nav li：hover替换为以下内容。
.nav li:hover a{
color: #97A6AA;
text-decoration: underline;
cursor: pointer;
}
https://jsfiddle.net/c1egheLy/ https://jsfiddle.net/c1egheLy/
解决方案2
0 已采纳 2017-02-24 10:48:33
You have define 您已经定义
.nav a {
color: #70B0A8;
}
at the end of your CSS which will surely override your :hover effect and also you've defined :hover color for .nav li:hover { instead of .nav li:hover a { viz not a right way to define hover effect for a tag inside li . 在你结束CSS必将覆盖您:hover效果，你也已经确定:hover颜色.nav li:hover {代替.nav li:hover a {即没有定义悬停效果正确的方式a在li内标记。
Further you should first define the border-bottom and padding for your li tag initially instead of :hover to prevent the jumping issue . 此外，您应该首先为li标签而不是:hover定义border-bottom和padding ，以防止跳转问题 。
You have to change your CSS like the Snippet below. 您必须像下面的Snippet一样更改CSS 。
Code Snippet 代码段
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>
解决方案3
0 2017-02-24 10:52:21
So you remove the padding on hover and simply change the CSS around to suit what you need such as below: 因此，您可以删除悬停时的填充，只需更改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; } .nav li{ display: inline; text-align: right; color: grey; font-size: 20px; font-weight: 700; margin-right: 60px; height: 100px; opacity: 0.6; border-bottom: transparent; } .nav li a:hover { color: #70B0A8; border-bottom: 1px solid #97A6AA; cursor: pointer; } .nav a { color: grey; text-decoration: none; }
<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>
Im slightly baffled as to why you don't have your logo beside the menu links too but thats simply moving the <img> into <class="nav"> but then within this instance you'd need to add width:100%; 我对为什么菜单链接旁边也没有徽标感到困惑，但这就是将<img>移到<class="nav">但是在这种情况下，您需要添加width:100%; to .nav {} CSS 到.nav {} CSS
解决方案4
0 2017-02-24 11:00:24
Replace this lines in your code 在代码中替换此行
.nav li:hover {
color: #97A6AA;
border-bottom: 1px solid #18961d; //Green Color
cursor: pointer;
/* padding: 10px; */ //Remove this padding line
}
I hope this helps.. 我希望这有帮助..
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.