不再悬停时仍会保留波浪形文字装饰：Chrome

时间：2018-09-17 04:56:26

标签： html css

悬停时，我在某些导航链接上应用了波浪形文字装饰。在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);
}

3 个答案:

答案 0 :(得分：0)

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

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

答案 1 :(得分：0)

/* 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>

答案 2 :(得分：0)

为简单起见，除<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>

相关问题
最新问题