使用 CSS3 在 HTML 表上应用指示符

Question

我正在使用html来构建一个表，

此表用作导航栏，我正在尝试添加 css3 动画以增加导航栏的创造力，所以我使用此代码，但我无法弄清楚为什么动画部分出现。 基本上，一旦您将鼠标悬停在孩子身上，动画应该显示 2 个点，一个以不同的颜色在另一个点之上，但表中每个'li child'只出现一个点并且颜色相同。

如何在菜单中悬停孩子时添加 2 点动画？每个孩子都会表现出不同的颜色。

代码笔 https://codepen.io/yotking789/pen/JjoJYvE

html, body
{
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: 1200px;
margin: 0 auto;
height: 70px;
}
.navigation-bar {
background-color: #352d2f;
height: 70px;
width: 100%;
text-align:center;
}
.navigation-bar img{
float:left;
margin-top: -65px
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display:inline-block;
vertical-align:top;
transform: translate(0);
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
}
.navigation-bar li a {
display: inline;
color: #949494;
text-decoration: none;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: bold;
padding: 10px 20px;
line-height: 70px;
transition: 0.2s ease color;
}
#menu {
float: right;
}
ul li a:before, ul li a:after
{
content: "";
position: absolute;
border-radius: 50%;
transform: scale(0);
transition: 0.2s ease transform;
}
ul li a:before
{
top: 0;
left: 10px;
width: 6px;
height: 6px;
}
ul li a:after
{
top: 5px;
left: 18px;
width: 4px;
height: 4px
}
ul li a:nth-child(1):before
{
background-color: yellow;
}
ul li a:nth-child(1):after
{
background-color: red;
}
ul li a:nth-child(2):before
{
background-color: #00e2ff;
}
ul li a:nth-child(2):after
{
background-color: #89ff00;
}
ul li a:nth-child(3):before
{
background-color: purple;
}
ul li a:nth-child(3):after
{
background-color: palevioletred;
}
ul li a:nth-child(4):before
{
background-color: Grey;
}
ul li a:nth-child(4):after
{
background-color: white;
}
ul li a:hover
{
color: #fff;
}
ul li a:hover:before, nav a:hover:after
{
transform: scale(1);
}
ul li a:nth-child(1):hover ~ #indicator
{
background: linear-gradient(130deg, yellow, red);
}
ul li a:nth-child(2):hover ~ #indicator
{
left: 34%;
background: linear-gradient(130deg, #00e2ff, #89ff00);
}
ul li a:nth-child(3):hover ~ #indicator
{
left: 70%;
background: linear-gradient(130deg, purple, palevioletred);
}

<div class="navigation-bar">
<div id="navigation-container">
<img src="images/logo.png">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Get in Touch</a></li>
</ul>
</div>
</div>

Answer 1

检查以下代码，第 n 个孩子应该是"li"而不是"a"，

html, body
{
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: 1200px;
margin: 0 auto;
height: 70px;
position: relative;
}
.navigation-bar {
background-color: #352d2f;
height: 70px;
width: 100%;
text-align:center;
}
.navigation-bar img{
float:left;
margin-top: -65px
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display:inline-block;
vertical-align:top;
transform: translate(0);
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
}
.navigation-bar li a {
display: inline;
color: #949494;
text-decoration: none;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: bold;
padding: 10px 20px;
line-height: 70px;
transition: 0.2s ease color;
position:relative;
}
#menu {
float: right;
}
ul li a:before, ul li a:after
{
content: "";
position: absolute;
border-radius: 50%;
transform: scale(0);
transition: 0.2s ease transform;
}
ul li a:before
{
top: 0;
left: 10px;
width: 6px;
height: 6px;
}
ul li a:after
{
top: 5px;
left: 18px;
width: 4px;
height: 4px
}
ul li:nth-child(1) a:before
{
background-color: yellow;
}
ul li:nth-child(1) a:after
{
background-color: red;
}
ul li:nth-child(2) a:before
{
background-color: #00e2ff;
}
ul li:nth-child(2) a:after
{
background-color: #89ff00;
}
ul li:nth-child(3) a:before
{
background-color: purple;
}
ul li:nth-child(3) a:after
{
background-color: palevioletred;
}
ul li:nth-child(4) a:before
{
background-color: Grey;
}
ul li:nth-child(4) a:after
{
background-color: white;
}
ul li a:hover
{
color: #fff;
}
ul li a:hover:before, ul li a:hover:after
{
transform: scale(1);
}
ul li:nth-child(1) a:hover ~ #indicator
{
background: linear-gradient(130deg, yellow, red);
}
ul li:nth-child(2) a:hover ~ #indicator
{
left: 34%;
background: linear-gradient(130deg, #00e2ff, #89ff00);
}
ul li:nth-child(3) a:hover ~ #indicator
{
left: 70%;
background: linear-gradient(130deg, purple, palevioletred);
}

<div class="navigation-bar">
<div id="navigation-container">
<img src="images/logo.png">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Get in Touch</a></li>
</ul>
</div>
</div>

Answer 2

html, body
{
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: 1200px;
margin: 0 auto;
height: 70px;
}
.navigation-bar {
background-color: #352d2f;
height: 70px;
width: 100%;
text-align:center;
}
.navigation-bar img{
float:left;
margin-top: -65px
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display:inline-block;
vertical-align:top;
transform: translate(0);
}
.navigation-bar li {
position: relative;
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
}
.navigation-bar li a {
display: inline;
color: #949494;
text-decoration: none;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: bold;
padding: 10px 20px;
line-height: 70px;
transition: 0.2s ease color;
}
#menu {
float: right;
}
ul li a:before, ul li a:after
{
content: "";
position: absolute;
border-radius: 50%;
transform: scale(0);
transition: 0.2s ease transform;
}
ul li a:before
{
top: 0;
left: 10px;
width: 6px;
height: 6px;
}
ul li a:after
{
top: 5px;
left: 18px;
width: 4px;
height: 4px
}
ul li:nth-child(1) a:before
{
background-color: yellow;
}
ul li:nth-child(1) a:hover:after
{
background-color: red;
}
ul li:nth-child(2) a:before
{
background-color: #00e2ff;
}
ul li:nth-child(2) a:hover:after
{
background-color: #89ff00;
}
ul li:nth-child(3) a:before
{
background-color: purple;
}
ul li:nth-child(3) a:hover:after
{
background-color: palevioletred;
}
ul li:nth-child(4) a:before
{
background-color: Grey;
}
ul li:nth-child(4) a:hover:after
{
background-color: white;
}
ul li:nth-child(5) a:before
{
background-color: #9c27b0;
}
ul li:nth-child(5) a:hover:after
{
background-color: #ff5722;
}
ul li a:hover
{
color: #fff;
}
ul li a:hover:before, nav a:hover:after
{
transform: scale(1);
}
ul li a:nth-child(1):hover ~ #indicator
{
background: linear-gradient(130deg, yellow, red);
}
ul li a:nth-child(2):hover ~ #indicator
{
left: 34%;
background: linear-gradient(130deg, #00e2ff, #89ff00);
}
ul li a:nth-child(3):hover ~ #indicator
{
left: 70%;
background: linear-gradient(130deg, purple, palevioletred);
}

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>My Portfolio</title>
</head>
<body>
<div class="navigation-bar">
<div id="navigation-container">
<img src="images/logo.png">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Get in Touch</a></li>
</ul>
</div>
</div>
</body>
</html>