麻烦：hover

Question

我对链接的悬停效果有点麻烦，这是我以前从未遇到过的问题。我在下面发布了摘录，但我很困惑....

.headerNav .headContainer>div>a {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: #E6BA6A;
  height: 55px;
  display: inline-block;
  padding: 0 30px;
  line-height: 60px;
  transition: .25s;
}

.headerNav .headContainer>div>a:hover {
  background: rgba(255, 255, 255, 0.035);
  box-shadow: 0 -5px 8px rgba(0, 0, 0, 0.1) inset;
}

<header class="header" id="header">

  <!-- Logo Shine Effect-->
  <div id="rainbowEffect">
    <div class="rainbowPreload orange"></div>
    <div class="rainbowPreload lime"></div>
    <div class="rainbowPreload cyan"></div>
    <div class="rainbowPreload red"></div>
    <div class="rainbowPreload purple"></div>
  </div>

  <div class="headerNav">
    <div class="headContainer headNavItems">
      <div class="navItemsLeft">
        <a href="#">Test</a>
        <a href="#">Test</a>
        <a href="#">Test</a>
        <a href="#">Test</a>
      </div>
      <div class="navItemsRight">
        <a href="#">Test</a>
        <a href="#">Test</a>
        <a href="#">Test</a>
        <a href="#">Test</a>
      </div>
    </div>
  </div>
  <div class="headerSubNav">

  </div>
</header>

[当我使用开发工具进行检查时，元素似乎正在“迷路”，这就是RainbowEffect。如果我使用开发工具手动激活悬停状态，就可以了。

Answer 1

[尝试为每个链接添加一个ID，并以此方式确定其悬停状态。这将允许悬停时链接的阴影和变暗。它在起作用：https://jsfiddle.net/5bye8x3j/

#hov:hover {
  color: #fcb023;
}

<div class="headContainer headNavItems">
      <div class="navItemsLeft">
        <a id="hov" href="#">Test</a>
        <a id="hov" href="#">Test</a>
        <a id="hov" href="#">Test</a>
        <a id="hov" href="#">Test</a>
      </div>
      <div class="navItemsRight">
        <a id="hov" href="#">Test</a>
        <a id="hov" href="#">Test</a>
        <a id="hov" href="#">Test</a>
        <a id="hov" href="#">Test</a>
      </div>
    </div>