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

【问题标题】：Wavy text decoration remains when no longer hovering: Chrome不再悬停时，波浪文本装饰仍然存在：Chrome
【发布时间】：2018-09-17 04:56:26
【问题描述】：

我在悬停时对一些导航链接应用了波浪文本装饰。在 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);
}

【问题讨论】：

标签： html css

【解决方案1】：

为了简单起见，除了<a> 之外，我已经删除了这些类。细节在 CSS 中注释。

演示

/* Browser reset */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
}


/* End of browser reset */

body {
  background: url("https://www.worshipbackgroundsforfree.com/wp-content/uploads/2012/12/Screen-Shot-2012-12-20-at-11.21.52-AM.png") no-repeat center center fixed;
  background-size: cover;
}


/* Defines header as a flexbox */

header {
  height: 50px;
  width: 100%;
  background: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}


/* This is a flex item */
/* Removed <div> wrapped around <a> */

/* Positions index link on the left side of the flex container */
/* Added display:block to <a> so it doesn't need a <div> wrapped around it */
.title {
  display: block;
  font-size: 2em;
  margin-right: auto;
  margin-left: 10px;
  color: rgb(0, 0, 0);
  text-decoration: none;
  font-family: "Great Vibes", cursive;
}


/* This is a flex item */

nav {
  margin-right: 10px;
}


/* Removes bullets */

nav ul {
  list-style: none;
}

nav li {
  display: inline-block;
}

/* <a> has 4 pseudo-classes that must be in this order:
:link, :visited, :hover, :active
LoVe and HAte
i i      oc
n s      vt
k i      ei
  t      rv
  e       e
  d
*/
nav a:link,
nav a:visited {
  text-decoration: none;
  font-weight: bold;
  color: rgb(0, 0, 0);
  letter-spacing: 2px;
  font-size: 1.1em;
  /* Added so when hovered there's no overlap */
  padding: 5px;
}

nav a:hover,
nav a:active {
  text-decoration-line: underline;
  text-decoration-style: wavy;  
  /* Added because it's buggy without it */
  outline: 1px solid rgba(255, 255, 255, 0.1);
}

nav a.link-1:hover,
nav a.link-1:active {
  text-decoration-color: red;
}

nav a.link-2:hover,
nav a.link-2:active {
  text-decoration-color: green;
}

nav a.link-3:hover,
nav a.link-3:active {
  text-decoration-color: blue;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">
  <title>Wedding Draft</title>
</head>

<body>
  <header>
    <a class="title" href="index.html">The Mc-Stamm Wedding</a>


    <nav>
      <ul>
        <li><a href="venue-info.html" class="link-1">Venue Info</a></li>
        <li><a href="accommodations.html" class="link-2">Accommodations</a></li>
        <li><a href="wedding-party.html" class="link-3">Wedding Party</a></li>
      </ul>
    </nav>
  </header>

  <main>

  </main>

  <footer>

  </footer>
</body>

</html>

【讨论】：

谢谢。这很有帮助。

【解决方案2】：

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

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

【讨论】：

text-decoration: none 实际上应用于选择器 .main-nav__item__link 规则中的所有三个链接。我为每个类创建单独类的唯一原因是设置不同的下划线颜色。
main-nav__item__link 仅适用于您的链接 (<a>)，而您的悬停规则适用于包含的 div

【解决方案3】：

/* Browser reset */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  border: 0;
}
/* End of browser reset */

body {
  background: url("https://www.worshipbackgroundsforfree.com/wp-content/uploads/2012/12/Screen-Shot-2012-12-20-at-11.21.52-AM.png") no-repeat center center fixed;
  background-size: cover;
}

/* Defines header as a flexbox */
.main-header {
  height: 50px;
  width: 100%;
  background: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* This is a flex item */
/* Positions index link on the left side of the flex container */
.main-header__index-link-container {
  margin-right: auto;
  margin-left: 10px;
    text-decoration: none;
}

/* styles index link */
.main-header__index-link {
  font-size: 2em;
/*   color: rgb(0, 0, 0); */
  text-decoration: none;
  font-family: "Great Vibes", cursive;
}

/* This is a flex item */
.main-nav {
  margin-right: 10px;
}

/* Removes bullets */
.main-nav__items {
  list-style: none;
  padding: 0;
  margin: 0;
  transition: all 0.3s ease;
  text-decoration: none;
}

.main-nav__item {
  display: inline-block;
}
a { text-decoration: none; }
main-nav:hover { text-decoration: none; }
.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;
    text-decoration: none;
  transition: all 0.3s ease;
}

/* .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);
} */
.main-nav__item a:hover {
    text-decoration: underline wavy rgb(0, 0, 255);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="wedding.css">
  <link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">
  <title>Wedding Draft</title>
</head>

<body>
  <header class="main-header">
    <div class="main-header__index-link-container">
      <a class="main-header__index-link" href="index.html">The Mc-Stamm Wedding</a>
    </div>

    <nav class="main-nav">
      <ul class="main-nav__items">
        <li class="main-nav__item main-nav__item-one"><a href="venue-info.html" class="main-nav__item__link main-nav__item__link-one">Venue Info</a></li>
        <li class="main-nav__item main-nav__item-two"><a href="accommodations.html" class="main-nav__item__link main-nav__item__link-two">Accommodations</a></li>
        <li class="main-nav__item main-nav__item-three"><a href="wedding-party.html" class="main-nav__item__link main-nav__item__link-three">Wedding Party</a></li>
      </ul>
    </nav>
  </header>
    
  <main>
 
  </main>

  <footer>
  
  </footer>
</body>

</html>

【讨论】：

您的解决方案不允许为每个链接设置不同颜色的下划线。