css 如何让2个a：hover值同时一起工作？

vq8itlhq 于 2023-02-14 发布在其他

关注(0)|答案(2)|浏览(326)

当我有两个a：hover值在彼此的正上方，但只有第一个值工作，第二个不工作时，我该怎么办？可能是一个简单的解决方案，但找不到它。

<div>
          <a href="#">Home</a>
        </div>
        <div>
          <a href="#">Features</a>
        </div>
        <div>
          <a href="#">Pricing</a>
        </div>
        <div>
          <a href="#">Contact</a>
        </div>
        <div>
          <a class="button-go-premium" href="#">Go Premium</a>
        </div>
      </div>

.button-go-premium {
  border: 3px solid var(--primary-color);
  border-radius: 15px;
  margin-top: -3px;
  padding-right: 0px;
}

.navbar a:hover {
  color: var(--primary-color);
}

.button-go-premium:hover {
  background-color: var(--primary-color);
  color: white;
}

我尝试删除第一个值（--primary color），只有这样第二个值（white）才能工作，但我需要两个值同时工作。如果可能，我不想改变div的顺序或任何语法。

css

来源：https://stackoverflow.com/questions/75416370/how-to-get-2-ahover-values-working-together-at-the-same-time

2条答案

按热度按时间

tyky79it1#

作为简单但不是最佳实践的解决方案，您可以使用color: white !important
但是最好为常规链接和特定链接添加类。

.button-go-premium {
  border: 3px solid red;
  border-radius: 15px;
  margin-top: -3px;
  padding-right: 0px;
}

.navbar .link:hover {
  color: red;
}

.link.button-go-premium:hover {
  background-color: red;
  color: white;
}

<div class="navbar">
  <div>
    <a class="link" href="#">Home</a>
  </div>
  <div>
    <a class="link" href="#">Features</a>
  </div>
  <div>
    <a class="link" href="#">Pricing</a>
  </div>
  <div>
    <a class="link" href="#">Contact</a>
  </div>
  <div>
    <a class="link button-go-premium" href="#">Go Premium</a>
  </div>
</div>

赞(0）回复(0）举报 2023-02-14

xghobddn2#

尝试使用