Question

遵循THIS关于如何使用CSS为下划线设置动画的简短教程。

我想在我的nav-header中使用它，这意味着我希望活动标签标题始终加下划线。有没有人有任何建议？最终代码如下所示：

h2 > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
 -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

h2 > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

文字装饰：下划线;看起来并不好看

Answer 1

在这里，我创造了一个小提琴，我相信你想要的东西。只需将活动标签设为“有效”http://jsfiddle.net/ctwheels/wsLu306f/

类即可

<强> HTML

<a href="http://tobiasahlin.com/blog/" class="underlined-example active link">Hover this link</a>

<强> CSS

.active {
    position: relative;
    color: #000;
    text-decoration: none;
}
.link:hover {
    color: #000;
}
.link:before {
    content:"";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #000;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
.link:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}
.permalink:before {
    content:"";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #000;
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

<强> JS

$("a").hover(function () {
    $(this).addClass("permalink");
    setInterval(function () {
        $(this).removeClass("link");
    }, 100);
});

如何让CSS悬停动画留下来？

1 个答案: