时间戳

首页 > 解决方案 > 不再悬停时，波浪文本装饰仍然存在：Chrome

html - 不再悬停时，波浪文本装饰仍然存在：Chrome

问题描述

我在悬停时对一些导航链接应用了波浪文本装饰。在 Chrome 中，当不再悬停时，一半的波浪装饰仍然存在，通常在我悬停的第一个链接上。当悬停在不同的链接上时，有时也会发生这种情况。这是一个非常奇怪的效果。这在 Firefox 中不会发生。如果下划线是正常的/不是波浪形的，它在 Chrome 中的行为也符合预期。以下代码笔显示了我的问题。文本装饰规则位于 CSS 的底部。我还是新手，所以不完全确定发生了什么。

https://codepen.io/pmc222/pen/mGGaXO

.main-nav {
  margin-right: 10px;
}

/* Removes bullets */
.main-nav__items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-nav__item {
  display: inline-block;
}

.main-nav__item__link {
  text-decoration: none;
  font-weight: bold;
  color: rgb(0, 0, 0);
  letter-spacing: 2px;
  padding: 0 5px 0;
  font-size: 1.1em;
}

.main-nav__item__link-one:hover {
  text-decoration: underline wavy rgb(255, 0, 0);
}

.main-nav__item__link-two:hover {
  text-decoration: underline wavy rgb(0, 255, 0);
}

.main-nav__item__link-three:hover {
  text-decoration: underline wavy rgb(0, 0, 255);
}

标签： htmlcss

解决方案

我没有在您的代码中发现错误，但是您可以通过在未悬停时为每个类添加默认样式来克服它：

.main-nav__item__link-one{
    text-decoration:none;
}    
.main-nav__item__link-two{
    text-decoration:none;
}
.main-nav__item__link-three{
    text-decoration:none;
}

推荐阅读