我还有另一个问题。我不知道问题出在哪里。我在菜单项周围添加了边框。一切正常,直到我添加了徽标。我相信问题出在我的.Main-Nav li a:hover上。在我的CSS中。我将发布所有内容,看看你们是否能解决。我也想知道我是否需要为网站上的每个页面制作不同的文件
* {
margin: 0PX;
padding: 0PX;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://static.pexels.com/photos/371794/pexels-photo-371794.jpeg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav {
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "roboto", sans-serif;
font-size: 15px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 200px;
height: auto;
float: left;
}
body {
font-family: monospace;
}
.row {
max-width: 1200px;
margin: auto;
}
.hello {
position: absolute;
width: 1200px;
margin-left: 0px;
margin-top: 0px;
}
h1 {
color: white;
text-text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 275px;
}
.button {
margin-top: 30px;
margin-left: 440px;
}
.btn {
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
}
.btn-one {
background-color: darkorange;
font-family: "roboto", sans-serif;
}
.btn-two {
font-family: "roboto", sans-serif;
}
.btn-two:hover {
background-color: darkorange;
transition: all 0.5s ease-in;
}
<HTML>
<Head>
<title> Drew's Blog</title>
<link href="style.css" rel="stylesheet" type "text/css" </head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Oh-deer.png">
</div>
<ul class="main-nav">
<li class="active"><a href=""> HOME </a></li>
<li><a href=""> ABOUT </a></li>
<li><a href=""> GALLERY </a></li>
<li><a href=""> NEWS </a></li>
<li><a href=""> CONTACT </a></li>
<li><a href=""> LESSONS </a></li>
</ul>
</div>
<div class="Hello">
<h1> Lets Get Started</h1>
<div class="button">
<a href="" class="btn btn-one"> Get to Know Me</a>
<a href="" class="btn btn-two"> Check out my lessons</a>
</div>
</header>
</body>
</html>
`
最佳答案
在
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "roboto", sans-serif;
font-size: 15px;
}
添加:
border: 2px solid white;
这将在
<li>
标记中放置的菜单项周围加边框在活动类中查找边框:
.main-nav li.active a {
border: 2px solid white;
}
那是HOME按钮,因为它的班级是活跃的(
class="active">
)并且已经有边框了我更改了像素,以便可以看到结果,但是问题恰恰在于:像素。如果
hover
像素和li
像素相同,则看不到任何变化这将为菜单项添加边框,并在您将鼠标悬停在菜单项上时进行更改。
另外,
.main-nav li a:hover
恰恰相反。当您在此处定义边框并将鼠标悬停在菜单项上时,将出现边框,因此基本上尝试平衡像素。
我正在尝试弄清楚您到底想要什么。您是否希望边框始终存在,并且当您将鼠标悬停在边框上方时,希望边框消失或希望将边框悬停在边框上时出现边框。
关于html - 菜单项周围的边框消失,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47566424/