html - 如何在悬停时为每个 <a> 链接设置不同颜色的样式？

Question

我正在设计导航栏 <a>标签，我想要每个 <a>标签具有与 Logo 一致的不同颜色编码的实心边框底部。

我只想在悬停时显示彩色边框。目前这就是我的方式 -

header {
  height: 50px;
}

nav {
  text-align: center;
  padding: 10px;
  margin-top: 20px;
}

nav a {

  color: #000000;
  text-decoration: none;
  display: inline-block;
  padding: 5px;

}

nav a:link {

  color: #000000;
  text-decoration-line: none;
}

<header>
    <nav>
	<a href="home" style="border-bottom: 2px solid rgb(255,29,142);">Home</a>
	<a href="What we do" style="border-bottom: 2px solid rgb(133,52,146);">What we do</a>
	<a href="Who we are" style="border-bottom: 2px solid rgb(255,128,55);">Who we are</a>
	<a href="Who we work with" style="border-bottom: 2px solid rgb(0,182,223);">Who we work with</a>
	<a href="Say hello" style="border-bottom: 2px solid rgb(63,190,150);">Say hello</a>
	<a href="Blog" style="border-bottom: 2px solid rgb(255,222,32);">Blog</a>
    </nav>
</header>

因为每个 <a>标签是不同的颜色我认为这是最好的方法但是我如何放置它的规则只适用于a:hover ？

Answer 1

您需要将这些设置移动到您的样式表并使用更具体的选择器:我在下面使用了 :nth-child(x):

header {
  height: 50px;
}

nav {

  text-align: center;
  padding: 10px;
  margin-top: 20px;
}

nav a {

  color: #000000;
  text-decoration: none;
  display: inline-block;
  padding: 5px;

}

nav a:link {

  color: #000000;
  text-decoration-line: none;
}
nav a:hover {
border-bottom: 2px solid rgb(255,29,142);
}
nav a:nth-child(2):hover {
border-bottom: 2px solid rgb(133,52,146);
}
nav a:nth-child(3):hover {
border-bottom: 2px solid rgb(255,128,55);
}
nav a:nth-child(4):hover {
border-bottom: 2px solid rgb(0,182,223);
}
nav a:nth-child(5):hover {
border-bottom: 2px solid rgb(63,190,150);
}
nav a:nth-child(6):hover {
border-bottom: 2px solid rgb(255,222,32);
}

<header>
    <nav>
	<a href="#">Home</a>
	<a href="What we do">What we do</a>
	<a href="Who we are">Who we are</a>
	<a href="Who we work with">Who we work with</a>
	<a href="Say hello">Say hello</a>
	<a href="Blog">Blog</a>
    </nav>
</header>