![](/img/trans.png)
[英]List items on Navigation bar move forward when I hover the mouse on it
[英]My html/css navigation bar hover function causes the list items to move out of place
我不知道为什么,但是我很难解释这个问题,如果书名不是我想说的话,抱歉。 我创建了另一种类型的html / css导航栏,这只是一种很好的做法,但我遇到了一个小问题。 如您所见,如果您在下面的代码中运行,则将鼠标悬停在导航项上时,背景颜色就不合适了,我希望它像下面的图像一样伸展,但是它确实重叠了! 感谢您的帮助! 继承人的代码和图像!
*{margin:0; padding:0;} body{ background:black; /*background-image:url(../res/back.jpg);*/ background-size:cover; } header{ width:200px; height:600px; background-color:rgba(255, 255, 255, 0.5); border:4px solid white; border-radius:7px; margin:10px 0px 0px 360px; } header h1{ font-family:Impact; font-size:30px; color:white; font-weight:900; text-align:center; margin-top:75px; } header nav{ } header nav ul{ } header nav ul li{ list-style:none; text-align: center; margin-top:25px; position:relative; top:60px; } header nav ul li a{ font-family:Impact; font-size:25px; text-decoration: none; color:white; font-weight:900; text-align:center; } header nav ul li a:hover{ background:#ADABAB; color:black; padding:5px 70px 5px 70px; }
<html> <head> <meta charset="UTF-8"> <title>Home</title> <link rel="stylesheet" type="text/css" href="style/style.css"> <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/script.js"></script> </head> <body> <header> <h1>WELCOME</h1> <nav> <ul> <li><a href="#">HOME</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">PRODUCTS</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">DONATE</a></li> </ul> </nav> </header> </body> </html>
你很亲近 让我知道这是否是您想要的。
在CSS中查看我的评论
*{margin:0; padding:0;} body{ background:black; /*background-image:url(../res/back.jpg);*/ background-size:cover; } header{ width:200px; height:600px; background-color:rgba(255, 255, 255, 0.5); border:4px solid white; border-radius:7px; margin:10px 0px 0px 360px; } header h1{ font-family:Impact; font-size:30px; color:white; font-weight:900; text-align:center; margin-top:75px; } header nav{ } header nav ul{ } header nav ul li{ list-style:none; text-align: center; margin-top:25px; position:relative; top:60px; /*added padding*/ padding:10px; } header nav ul li a{ font-family:Impact; font-size:25px; text-decoration: none; color:white; font-weight:900; text-align:center; } /* chaged from: header nav ul li a:hover to:header nav ul li:hover also removed the padding on hover */ header nav ul li:hover{ background:#ADABAB; color:black; }
<html> <head> <meta charset="UTF-8"> <title>Home</title> <link rel="stylesheet" type="text/css" href="style/style.css"> <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/script.js"></script> </head> <body> <header> <h1>WELCOME</h1> <nav> <ul> <li><a href="#">HOME</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">PRODUCTS</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">DONATE</a></li> </ul> </nav> </header> </body> </html>
JSFiddle: http : //jsfiddle.net/hqadcurt/
我在这里所做的是确保<a>
与列表相同。
header nav ul li a{
font-family:Impact;
font-size:25px;
text-decoration: none;
color:white;
font-weight:900;
text-align:center;
display:inline-block;
max-width:100%;
width:100%;
}
如果您不希望在悬停时四处走动,只需移除悬停时的填充即可。
header nav ul li a:hover{
background:#ADABAB;
color:black;
}
使用li:hover
而不是li a:hover
并删除其上的填充。
* { margin: 0; padding: 0; } body { background: black; /*background-image:url(../res/back.jpg);*/ background-size: cover; } header { width: 200px; height: 600px; background-color: rgba(255, 255, 255, 0.5); border: 4px solid white; border-radius: 7px; margin: 10px 0px 0px 360px; } header h1 { font-family: Impact; font-size: 30px; color: white; font-weight: 900; text-align: center; margin-top: 75px; } header nav {} header nav ul {} header nav ul li { list-style: none; text-align: center; margin-top: 25px; position: relative; top: 60px; } header nav ul li a { font-family: Impact; font-size: 25px; text-decoration: none; color: white; font-weight: 900; text-align: center; } header nav ul li:hover { background: #ADABAB; } header nav ul li:hover a { color: black; }
<html> <head> <meta charset="UTF-8"> <title>Home</title> <link rel="stylesheet" type="text/css" href="style/style.css"> <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/script.js"></script> </head> <body> <header> <h1>WELCOME</h1> <nav> <ul> <li><a href="#">HOME</a> </li> <li><a href="#">GALLERY</a> </li> <li><a href="#">ABOUT</a> </li> <li><a href="#">PRODUCTS</a> </li> <li><a href="#">CONTACT</a> </li> <li><a href="#">DONATE</a> </li> </ul> </nav> </header> </body> </html>
*{margin:0; padding:0;} body{ background:black; /*background-image:url(../res/back.jpg);*/ background-size:cover; } header{ width:200px; height:600px; background-color:rgba(255, 255, 255, 0.5); border:4px solid white; border-radius:7px; margin:10px 0px 0px 360px; } header h1{ font-family:Impact; font-size:30px; color:white; font-weight:900; text-align:center; margin-top:75px; } header nav{ } header nav ul{ } header nav ul li{ list-style:none; text-align: center; margin:15px 0px; position:relative; top:60px; } header nav ul li a{ font-family:Impact; font-size:25px; text-decoration: none; color:white; font-weight:900; display:block; text-align:center; padding:5px 0px; } header nav ul li a:hover{ background:#ADABAB; color:black; }
<html> <head> <meta charset="UTF-8"> <title>Home</title> <link rel="stylesheet" type="text/css" href="style/style.css"> <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/script.js"></script> </head> <body> <header> <h1>WELCOME</h1> <nav> <ul> <li><a href="#">HOME</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">PRODUCTS</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">DONATE</a></li> </ul> </nav> </header> </body> </html>
只是在某些地方更改了边距和填充。 你近了
尝试这个:
header nav ul li a{
font-family:Impact;
font-size:25px;
text-decoration: none;
color:white;
font-weight:900;
text-align:center;
padding: 5px 0px;
display: block;
}
header nav ul li a:hover{
background:#ADABAB;
color:black;
}
*{margin:0; padding:0;} body{ background:black; /*background-image:url(../res/back.jpg);*/ background-size:cover; } header{ width:200px; height:600px; background-color:rgba(255, 255, 255, 0.5); border:4px solid white; border-radius:7px; margin:10px 0px 0px 360px; } header h1{ font-family:Impact; font-size:30px; color:white; font-weight:900; text-align:center; margin-top:75px; } header nav{ } header nav ul{ } header nav ul li{ list-style:none; text-align: center; margin-top:25px; position:relative; top:60px; } header nav ul li a{ font-family:Impact; font-size:25px; text-decoration: none; color:white; font-weight:900; text-align:center; padding: 5px 0px; display: block; } header nav ul li a:hover{ background:#ADABAB; color:black; }
<html> <head> <meta charset="UTF-8"> <title>Home</title> <link rel="stylesheet" type="text/css" href="style/style.css"> <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/script.js"></script> </head> <body> <header> <h1>WELCOME</h1> <nav> <ul> <li><a href="#">HOME</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">PRODUCTS</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">DONATE</a></li> </ul> </nav> </header> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.