Question

I'm styling a nav bar <a> tags and I want each <a> tag to have a different color-coded solid border-bottom in line with a logo.

I only want the color border to show on hover. At the moment this is how I have it -

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>

Because each <a> tag is a different color I thought this would be the best way to do it but how do I place the rule for it only applying on 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>

Answer 2

您可以在不使用内联CSS的情况下保持所需的效果。

使用nth-of-type选择器，您可以在导航中定位所需的确切锚标记。

将颜色应用于:hover

上的边框

＆＃13;

header {
  height: 50px;
}

nav {
  text-align: center;
  padding: 10px;
  margin-top: 20px;
}

nav a {
  color: #000000;
  text-decoration: none;
  display: inline-block;
  padding: 5px;
  border-bottom: 2px solid transparent;
}

nav a:link {
  color: #000000;
  text-decoration-line: none;
}

nav a:nth-of-type(1):hover {
  border-color: rgb(255, 29, 142);
}

nav a:nth-of-type(2):hover {
  border-color: rgb(133, 52, 146);
}

nav a:nth-of-type(3):hover {
  border-color: rgb(255, 128, 55);
}

nav a:nth-of-type(4):hover {
  border-color: rgb(0, 182, 223);
}

nav a:nth-of-type(5):hover {
  border-color: rgb(63, 190, 150);
}

nav a:nth-of-type(6):hover {
  border-color: rgb(255, 222, 32);
}

＆＃13;

<header>
  <nav>
    <a href="home">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>

＆＃13;

Answer 3

如果您必须使用内联样式，那么此解决方案可能会对您有所帮助。请看一下该片段。

header {
  height: 50px;
}

nav {
  text-align: center;
  padding: 10px;
  margin-top: 20px;
}

nav a {
  position: relative;
  color: #000000;
  text-decoration: none;
  display: inline-block;
  padding: 5px;
  border-bottom: 2px solid transparent;
}

nav a:after {
  content: '';
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
  border-bottom: 2px solid #fff; /* same as background color */
}

nav a:hover:after {
  border-color: transparent;
}

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>

Answer 4

你可以使用nth-of-type选择器来做，否则你真的需要内联定义它，你可以使用下面的代码：

$Q  = "
*** SQLCode Here ***
"
$ab = Invoke-Sqlcmd -ServerInstance Serv1 -Database DB1 -Query $Q

## Write filename to a file
$l = $ab | select file | Out-File C:\temp\fname.txt

## Get filename to a file
$SentUsers = Get-Content -Path C:\temp\fname.txt

foreach ($i in $cr) {
    ## Exclude filename which already recieved an email by using -and $i.file -ne $SentUsers

    if ($i.Uid -eq 'No' -and $i.UIntheTeam -eq 'No' -and $i.file -ne $SentUsers ) {
        $user = $i.User
        Send-MailMessage -To @("abc") -Cc $user -From 'abc1' -SMTPServer abc.co.jp -Subject "TestSub" -Body "
** Mail Message Body Here **
"
    } else {
        'Exit'
    }
}

# Copy new current file name to file by overwriting existing file
$ab | select file | Out-File -FilePath C:\temp\fname.txt

如何设置每个<a> link with a different color on hover?

4 个答案: