我还有另一个问题。我不知道问题出在哪里。我在菜单项周围添加了边框。一切正常,直到我添加了徽标。我相信问题出在我的.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/

10-12 07:37
查看更多