时间戳

首页 > 解决方案 > 为什么css在悬停时向我的元素添加重复的边框？

html - 为什么css在悬停时向我的元素添加重复的边框？

问题描述

预期结果：活动链接有黑色底边框。当悬停在链接（不包括活动页面）上时，底部栏以不同的颜色显示。

实际结果：黑色底部边框出现在活动页面链接下方，但当将鼠标悬停在链接上时，它仍然存在，并出现第二个彩色底部边框。

我正在使用类似的代码来控制背景颜色，并且效果很好。但是当我切换到尝试使用底部边框时，我得到了一个意想不到的结果 -

出现两个底部边框，一个是黑色的，一个是彩色的。

ul.topnav li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border-bottom: 2px solid transparent
}

ul.topnav li a:hover:not(.active) {
    border-bottom: 2px solid #61a5c2;
}

ul.topnav li.active {
    border-bottom: 2px solid black
}
<header>
  <nav>
    <ul class="topnav">
      <li class="active"><a href="#">Home</a></li>
      <li class=""><a href="#">Diagnosis</a></li>
      <li class=""><a href="#">Data Visualization</a></li>
      <li class="right"><a href="#">About</a></li>
    </ul>
  </nav>
</header>

标签： htmlcss

解决方案

您可以将您的CSS更改为下面。“活动”类在 li 上，因此此检查将确保是否存在黑色边框，然后不要将边框悬停。所以 :not(.active) 将在 li

ul.topnav li:not(.active) a:hover {
    border-bottom: 2px solid #61a5c2;
}


ul.topnav li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border-bottom: 2px solid transparent
}

ul.topnav li:not(.active) a:hover {
    border-bottom: 2px solid #61a5c2;
}

ul.topnav li.active {
    border-bottom: 2px solid black
}
<header>
  <nav>
<ul class="topnav">
  <li class="active"><a href="#">Home</a></li>
  <li class=""><a href="#">Diagnosis</a></li>
  <li class=""><a href="#">Data Visualization</a></li>
  <li class="right"><a href="#">About</a></li>
</ul>
  </nav>
</header>

推荐阅读