Question

我有一个悬停过渡的按钮

CSS

it

html（从bootstrap / Wordpress生成）

.main-nav li a {
position: relative;
display: inline-block;
padding: 12px 10px;
}

.main-nav li a:after {
content: "";
position: absolute;
display: inline-block;
background-color: #d11e5d;
margin: 0 auto;
height: 3px; width: 0;
bottom: 3px; left: 0; right: 0;
}

.main-nav li a:hover { color: #d11e5d; }
.main-nav li a:hover:after { width: 80%; }

/* other links */ .main-nav li a:hover, .main-nav li a:hover:after {
transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
-webkit-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-moz-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-ms-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-o-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
}

after元素正确动画，但没有动画效果（只是突然停止）

Answer 1

问题是您使用的是transition州的:hover媒体资源。

改变这个：

...other links... , .main-nav li a:hover, .main-nav li a:hover:after {
transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
-webkit-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-moz-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-ms-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-o-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
}

对此：

...other links... , .main-nav li a, .main-nav li a:after {
-webkit-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-moz-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-ms-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-o-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
}

如果您想知道在悬停时应用CSS过渡属性而不是在正常状态下有什么区别，则可以检查this。

注意：

始终确保放置没有供应商前缀的属性以下。

Answer 2

我在最后一个CSS块中看到了一些问题：

...other links... , .main-nav li a:hover, .main-nav li a:hover:after {
transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
-webkit-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-moz-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-ms-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-o-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
}

作为一个小修复，我要指出供应商前缀transition属性应始终位于＆＃34;标准化＆＃34;之前。 CSS属性。换句话说，请将未加前缀的transition样式排在最后，以跟随-webkit-，-moz-，-ms-和-o-的样式。请参阅此回复SO answer to prefix ordering。

我注意到你包含了.main-nav li a:hover:after CSS选择器。如果这是您在悬停时尝试实现CSS转换所使用的，那么它将无法正常工作。 :after伪元素不适用于此用途。相反，你想要的是应用你在.main-nav li a上声明的过渡样式。请注意，我没有包含:hover伪元素。这是故意的。这样，我就说＆＃34; 当我将鼠标悬停在所选元素上时，我希望转换这些属性（宽度，背景颜色和边框）＆＃34; 。然后，分别在width元素上应用不同的background-color，border和.main-nav li a:hover CSS样式。这些将是将鼠标悬停在链接上后转换为转换为的属性样式。您现在注意到，当您将鼠标悬停在链接上时，样式会根据需要进行转换。

如果您在悬停链接时也尝试应用辅助转换，则必须单独为.main-nav li a:hover选择器应用这些样式。此外，您将在transition选择器上声明.main-nav li a:hover属性。就目前而言，您已将相同的转换应用于.main-nav li a和.main-nav li a:hover选择器（技术上很好，可能不是您想要的）。请参阅此帖子Different Transitions for Hover On/Off

＆＃13;

.main-nav li a {
  position: relative;
  display: inline-block;
  width: 25%;
  font: bold 3rem/2 Fantasy, Arial, sans-serif;
  padding: 12px 10px;
}

/* .main-nav li a:after {
  content: "";
  position: absolute;
  display: inline-block;
  background-color: #d11e5d;
  margin: 0 auto;
  height: 3px; width: 0;
  bottom: 3px; left: 0; right: 0;
} */

.main-nav li a:hover {
  width: 50%;
  color: #d11e5d;
  background-color: Yellow;
  font: lighter 5rem/3 cursive, serif;
}
.main-nav li a:hover:after { width: 80%; }

/* ...other links */
.main-nav li a {
  -webkit-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
  -moz-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
  -ms-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
  -o-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
  transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
}

.main-nav li a:hover {
  -webkit-transition: font 0.2s linear;
  -moz-transition: font 0.2s linear;
  -ms-transition: font 0.2s linear;
  -o-transition:font 0.2s linear;
  transition: font 0.2s linear;
}

＆＃13;

<!DOCTYPE>
<html>
<head>
</head>
<body>
<div class="main-nav">
   <ul class="menu">
      <li>
        <a href="..."> ... </a>
      </li>
   </ul>
</div>
</body>
</html>

＆＃13;

最后，我假设...other links文本用作评论。如果是这样，那么应该适当地注释掉/* Other links */，并且可能会导致问题。

转换链接＆＃39; hover-off＆＃39;没有动画

2 个答案: