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

Question

在我网站的主页上，我想以相同的方式在每个页面上显示4个超链接。除了我希望页面的链接与我将鼠标放在其上的颜色相同。

我以为我可以用这段代码得到它：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

但我认为将链接放在＆＃34; div＆＃34;中是一种不好的做法。在这种情况下。您只需为该链接注册一个类，并为该类编写样式。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;