我不能把盒子放在盒子里加上颜色不变

Question

在我网站的主页上有 4 个 hyperlink，我希望它们以相同的方式出现在每个页面上。除了我希望我所在页面的 link 与我将鼠标放在它上面时的颜色相同。

我想我可以用这个代码得到它：

.navigation {
  padding: 40px 0px;
  position: relative;
  text-align: center;
  width: 100%;
  font-size: 30px;
}

.navigation a {
  background: black;
  border: 1px solid grey;
  border-radius: 7px;
  color: white;
  display: inline-block;
  margin: 100px 35px;
  padding: 14px;
  text-decoration: none;
  opacity: 0.75;
  font-family: impact;
}

.navigation a:hover {
  background: white;
  border: 1px solid black;
  color: black;
}

#contact {
  background: white !important;
  color: black !important;
}

<div class="navigation">
  <a href="./productions.html">Mes productions</a>
  <a href="./DJ.html">DJ</a>
  <a target="_blank" href="./CV.pdf">Mon CV</a>
  <div id="contact">
    <a href="./contact.html">Me contacter</a>
  </div>
</div>

问题是它保持黑色背景颜色和白色字体颜色，并且它位于其他 link 之下，而不是与它们内嵌。

Answer 1

但我认为在这种情况下将 link 放在 "div" 中是一种不好的做法。您可以简单地为 link 注册一个 class 并为此 class.

编写样式

.navigation {
  padding: 40px 0px;
  position: relative;
  text-align: center;
  width: 100%;
  font-size: 30px;
}

.navigation a {
  background: black;
  border: 1px solid grey;
  border-radius: 7px;
  color: white;
  display: inline-block;
  margin: 100px 35px;
  padding: 14px;
  text-decoration: none;
  opacity: 0.75;
  font-family: impact;
}

.navigation a:hover {
  background: white;
  border: 1px solid black;
  color: black;
}

#contact a {
  background: white !important;
  color: black !important;
}

<div class="navigation">
  <a href="./productions.html">Mes productions</a>
  <a href="./DJ.html">DJ</a>
  <a target="_blank" href="./CV.pdf">Mon CV</a>
  <div id="contact">
    <a href="./contact.html">Me contacter</a>
  </div>
</div>

我不能把盒子放在盒子里加上颜色不变

I can't put a box inside a box plus color not changing

css

box