CSS 悬停时显示错误的颜色

Question

我对 css 和 html 的了解非常有限，所以在创建网站时我决定使用预制模板，这里的问题是我不知道如何更改某些内容出错了，这些是 html 和 css 文件：

我希望 Start league link 和 PC 控制下的任何东西在悬停时显示为蓝色而不是黄色，我不确定要更改什么。

@import url("https://fonts.googleapis.com/css?family=Lato");
* {
  box-sizing: border-box;
}

html,
body {
  font-family: 'Lato', sans-serif;
  margin: 0;
  min-height: 100vh;
  padding: 0;
}

html:before,
body:before {
  background: linear-gradient(145deg, #00e6b4, #c300ff);
  bottom: 0;
  content: '';
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
}

svg {
  cursor: pointer;
  height: 44px;
  width: 44px;
}

svg path {
  fill: #fff;
}

ol {
  list-style-type: none;
}

a[href] {
  color: #fff;
  position: relative;
  text-decoration: none;
}

a[href]:hover:after {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

a[href]:after {
  content: '';
  position: absolute;
  top: 100%;
  height: 4px;
  background: #fff;
  left: 0;
  right: 0;
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
  -webkit-transform-origin: left;
  transform-origin: left;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

.menu {
  position: relative;
  width: 250px;
}

.menu__content {
  color: #fff;
  margin: 0;
  padding: 0 0 25px 0;
  position: absolute;
  right: 100%;
  top: 0;
  width: 250px;
  z-index: 2;
}

.menu__toggle-label {
  height: 44px;
  left: 0;
  position: absolute;
  width: 44px;
}

.menu__toggle-label svg {
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
  z-index: 2;
}

.menu__toggle-label svg:nth-of-type(2) {
  left: 250px;
  -webkit-transform: scale(0);
  transform: scale(0);
}

.menu__toggle {
  opacity: 0;
  position: fixed;
}

.menu__toggle:checked~.menu__toggle-label {
  background: rgba(0, 0, 0, 0.65);
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  -webkit-transition: background 0.15s;
  transition: background 0.15s;
  width: 100vw;
}

.menu__toggle:checked~.menu__toggle-label svg:nth-of-type(1) {
  -webkit-transform: scale(0);
  transform: scale(0);
}

.menu__toggle:checked~.menu__toggle-label svg:nth-of-type(2) {
  left: 250px;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
  -webkit-transition-delay: 0.925s;
  transition-delay: 0.925s;
}

.menu__toggle:checked~.menu__content {
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}

.menu__toggle:checked~.menu__content .menu-item {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: border-color 0.15s, -webkit-transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: border-color 0.15s, -webkit-transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.15s;
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.15s, -webkit-transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(1) {
  border-color: red;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(1) a[href]:after {
  background: red;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(2) {
  border-color: #86e2d5;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(2) a[href]:after {
  background: #86e2d5;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) {
  border-color: #f5ab35;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) a[href]:after {
  background: #f5ab35;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) {
  border-color: #1e8bc3;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) a[href]:after {
  background: #1e8bc3;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(5) {
  border-color: #e26a6a;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(5) a[href]:after {
  background: #e26a6a;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(1) {
  -webkit-transition-delay: 0.225s, 0.875s;
  transition-delay: 0.225s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(2) {
  -webkit-transition-delay: 0.275s, 0.875s;
  transition-delay: 0.275s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) {
  -webkit-transition-delay: 0.325s, 0.875s;
  transition-delay: 0.325s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) .menu-item:nth-of-type(1) {
  -webkit-transition-delay: 0.375s, 0.875s;
  transition-delay: 0.375s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) .menu-item:nth-of-type(2) {
  -webkit-transition-delay: 0.425s, 0.875s;
  transition-delay: 0.425s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) .menu-item:nth-of-type(3) {
  -webkit-transition-delay: 0.475s, 0.875s;
  transition-delay: 0.475s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) {
  -webkit-transition-delay: 0.525s, 0.875s;
  transition-delay: 0.525s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) .menu-item:nth-of-type(1) {
  -webkit-transition-delay: 0.575s, 0.875s;
  transition-delay: 0.575s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) .menu-item:nth-of-type(2) {
  -webkit-transition-delay: 0.625s, 0.875s;
  transition-delay: 0.625s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) .menu-item:nth-of-type(3) {
  -webkit-transition-delay: 0.675s, 0.875s;
  transition-delay: 0.675s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(5) {
  -webkit-transition-delay: 0.725s, 0.875s;
  transition-delay: 0.725s, 0.875s;
}

.menu__content>.menu-item {
  border-left: 8px solid transparent;
}

.menu__content>.menu-item>a {
  line-height: 44px;
  min-width: 60px;
}

.sub-menu {
  padding: 0 0 0 44px;
}

.menu-item {
  line-height: 44px;
  min-height: 44px;
  padding: 0 12px;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.menu-item .menu-item {
  -webkit-transform: translateX(-150%);
  transform: translateX(-150%);
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <nav class="menu">
    <input id="menu__toggle" type="checkbox" class='menu__toggle' />
    <label for="menu__toggle" class="menu__toggle-label">
   <svg preserveAspectRatio='xMinYMin' viewBox='0 0 24 24'>
     <path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' />
   </svg>
   <svg preserveAspectRatio='xMinYMin' viewBox='0 0 24 24'>
     <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
   </svg>
    </label>
    <ol class='menu__content'>
      <li class="menu-item"><a style="font-size: 30px;" href="http://192.168.1.53">Home</a></li>
      <li class="menu-item">
        <a style="font-size: 30px;" href="#0">PC Control</a>
        <ol class="sub-menu">
          <li class="menu-item"><a style="font-size: 20px;" href="http://192.168.1.53/cgi-bin/C_shutdown.cgi">Turn Off PC</a></li>
          <li class="menu-item"><a style="font-size: 20px;" href="http://192.168.1.53/cgi-bin/PC_Lock.cgi">Lock PC</a></li>
          <li class="menu-item"><a style="font-size: 20px;" href="http://192.168.1.53/cgi-bin/Start_League.cgi">Start League</a></li>
        </ol>
      </li>
      <li class="menu-item">
        <a style="font-size: 30px;" href="#0">Light Control</a>
        <ol class="sub-menu">
          <li class="menu-item"><a style="font-size: 20px;" href="http://192.168.1.53/cgi-bin/Light_on.cgi">Turn On light</a></li>
          <li class="menu-item"><a style="font-size: 20px;" href="http://192.168.1.53/cgi-bin/Light_off.cgi">Turn off light</a></li>
        </ol>
      </li>
    </ol>
  </nav>
</body>

</html>

Answer 1

您的问题是您给子 li 元素也提供了与父元素相同的 class。这就是第二个主菜单的第三个元素受到影响的原因。快速修复如下。但我建议您更改子菜单 class 名称并使用此 class 名称编辑 css。如果以后添加新的元素就会出现这样的问题

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(2) .menu-item:nth-of-type(3) a[href]:after {
  background: #86e2d5;
}

@import url("https://fonts.googleapis.com/css?family=Lato");
* {
  box-sizing: border-box;
}

html,
body {
  font-family: 'Lato', sans-serif;
  margin: 0;
  min-height: 100vh;
  padding: 0;
}

html:before,
body:before {
  background: linear-gradient(145deg, #00e6b4, #c300ff);
  bottom: 0;
  content: '';
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
}

svg {
  cursor: pointer;
  height: 44px;
  width: 44px;
}

svg path {
  fill: #fff;
}

ol {
  list-style-type: none;
}

a[href] {
  color: #fff;
  position: relative;
  text-decoration: none;
}

a[href]:hover:after {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

a[href]:after {
  content: '';
  position: absolute;
  top: 100%;
  height: 4px;
  background: #fff;
  left: 0;
  right: 0;
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
  -webkit-transform-origin: left;
  transform-origin: left;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

.menu {
  position: relative;
  width: 250px;
}

.menu__content {
  color: #fff;
  margin: 0;
  padding: 0 0 25px 0;
  position: absolute;
  right: 100%;
  top: 0;
  width: 250px;
  z-index: 2;
}

.menu__toggle-label {
  height: 44px;
  left: 0;
  position: absolute;
  width: 44px;
}

.menu__toggle-label svg {
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
  z-index: 2;
}

.menu__toggle-label svg:nth-of-type(2) {
  left: 250px;
  -webkit-transform: scale(0);
  transform: scale(0);
}

.menu__toggle {
  opacity: 0;
  position: fixed;
}

.menu__toggle:checked~.menu__toggle-label {
  background: rgba(0, 0, 0, 0.65);
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  -webkit-transition: background 0.15s;
  transition: background 0.15s;
  width: 100vw;
}

.menu__toggle:checked~.menu__toggle-label svg:nth-of-type(1) {
  -webkit-transform: scale(0);
  transform: scale(0);
}

.menu__toggle:checked~.menu__toggle-label svg:nth-of-type(2) {
  left: 250px;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
  -webkit-transition-delay: 0.925s;
  transition-delay: 0.925s;
}

.menu__toggle:checked~.menu__content {
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}

.menu__toggle:checked~.menu__content .menu-item {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: border-color 0.15s, -webkit-transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: border-color 0.15s, -webkit-transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.15s;
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.15s, -webkit-transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(1) {
  border-color: red;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(1) a[href]:after {
  background: red;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(2) {
  border-color: #86e2d5;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(2) a[href]:after {
  background: #86e2d5;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) {
  border-color: #f5ab35;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) a[href]:after {
  background: #f5ab35;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(2) .menu-item:nth-of-type(3) a[href]:after {
  background: #86e2d5;
}


.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) {
  border-color: #1e8bc3;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) a[href]:after {
  background: #1e8bc3;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(5) {
  border-color: #e26a6a;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(5) a[href]:after {
  background: #e26a6a;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(1) {
  -webkit-transition-delay: 0.225s, 0.875s;
  transition-delay: 0.225s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(2) {
  -webkit-transition-delay: 0.275s, 0.875s;
  transition-delay: 0.275s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) {
  -webkit-transition-delay: 0.325s, 0.875s;
  transition-delay: 0.325s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) .menu-item:nth-of-type(1) {
  -webkit-transition-delay: 0.375s, 0.875s;
  transition-delay: 0.375s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) .menu-item:nth-of-type(2) {
  -webkit-transition-delay: 0.425s, 0.875s;
  transition-delay: 0.425s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) .menu-item:nth-of-type(3) {
  -webkit-transition-delay: 0.475s, 0.875s;
  transition-delay: 0.475s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) {
  -webkit-transition-delay: 0.525s, 0.875s;
  transition-delay: 0.525s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) .menu-item:nth-of-type(1) {
  -webkit-transition-delay: 0.575s, 0.875s;
  transition-delay: 0.575s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) .menu-item:nth-of-type(2) {
  -webkit-transition-delay: 0.625s, 0.875s;
  transition-delay: 0.625s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) .menu-item:nth-of-type(3) {
  -webkit-transition-delay: 0.675s, 0.875s;
  transition-delay: 0.675s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(5) {
  -webkit-transition-delay: 0.725s, 0.875s;
  transition-delay: 0.725s, 0.875s;
}

.menu__content>.menu-item {
  border-left: 8px solid transparent;
}

.menu__content>.menu-item>a {
  line-height: 44px;
  min-width: 60px;
}

.sub-menu {
  padding: 0 0 0 44px;
}

.menu-item {
  line-height: 44px;
  min-height: 44px;
  padding: 0 12px;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.menu-item .menu-item {
  -webkit-transform: translateX(-150%);
  transform: translateX(-150%);
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <nav class="menu">
    <input id="menu__toggle" type="checkbox" class='menu__toggle' />
    <label for="menu__toggle" class="menu__toggle-label">
   <svg preserveAspectRatio='xMinYMin' viewBox='0 0 24 24'>
     <path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' />
   </svg>
   <svg preserveAspectRatio='xMinYMin' viewBox='0 0 24 24'>
     <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
   </svg>
    </label>
    <ol class='menu__content'>
      <li class="menu-item"><a style="font-size: 30px;" href="http://192.168.1.53">Home</a></li>
      <li class="menu-item">
        <a style="font-size: 30px;" href="#0">PC Control</a>
        <ol class="sub-menu">
          <li class="menu-item"><a style="font-size: 20px;" href="http://192.168.1.53/cgi-bin/C_shutdown.cgi">Turn Off PC</a></li>
          <li class="menu-item"><a style="font-size: 20px;" href="http://192.168.1.53/cgi-bin/PC_Lock.cgi">Lock PC</a></li>
          <li class="menu-item"><a style="font-size: 20px;" href="http://192.168.1.53/cgi-bin/Start_League.cgi">Start League</a></li>
        </ol>
      </li>
      <li class="menu-item">
        <a style="font-size: 30px;" href="#0">Light Control</a>
        <ol class="sub-menu">
          <li class="menu-item"><a style="font-size: 20px;" href="http://192.168.1.53/cgi-bin/Light_on.cgi">Turn On light</a></li>
          <li class="menu-item"><a style="font-size: 20px;" href="http://192.168.1.53/cgi-bin/Light_off.cgi">Turn off light</a></li>
        </ol>
      </li>
    </ol>
  </nav>
  </body>

</html>

CSS 悬停时显示错误的颜色

CSS is displaying wrong colour on hover

html

css

hover