Question

我注意到Firefox中似乎没有发生此问题，只有Chrome和Edge才出现，因此大概是铬浏览器。

我正在尝试创建一个导航栏，其中每个链接元素都有一个悬停动画，变化的颜色和带阴影的下划线，当不悬停在链接上时，该阴影会消失。

在常规CSS中，此功能按预期工作，但是使用SCSS，即使没有悬停在链接上，框阴影下划线也会留下模糊的下划线工件。更奇怪的是，如果我切换到另一个选项卡，然后再次返回，则模糊的下划线消失了。

有人知道为什么会这样吗？

以下是指向密码笔的链接：https://codepen.io/signetohara-the-bashful/pen/yLJqoaL

HTML：

    <nav class="navbar">
      <div class="navCenter">
        <ul class="navLinks">
          <li>
            <a href="">Home</Link>
          </li>
          <li>
            <a href="">Contact</a>
          </li>
        </ul>
      </div>
    </nav>

SCSS：

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Yantramanav", sans-serif;
  background: #e8f1f5;
  color: #000;
  margin-top: 5rem;
}

ul {
  list-style-type: none;
}

.navbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5rem;
  display: flex;
  align-items: center;
  z-index: 200;
  background: #fafafa;
  border-bottom: 1px solid #d9d9d9;
}

.navCenter {
  width: 90vw;
  max-width: 73.125rem;
  margin: 0 auto;
}

.navLinks {
  display: flex;
  justify-content: flex-end;

   li {
     margin-right: 2rem;
   }

   a {
     text-decoration: none;
     text-transform: capitalize;
     color: #000;
     font-weight: bold;
     letter-spacing: 0.5rem;
     transition: all 0.3s linear;
     padding: 0.5rem 0;
   }

   a:hover {
     box-shadow: 0px 2px #00d7ff;
     color: #00d7ff;
   }
}

铬问题-SCSS过渡：悬停时留下阴影框

0 个答案: