Question

我想在链接悬停上显示虚线（平滑过渡）。我尝试了以下，没有成功。有什么问题？非常感谢，

 article p {
    margin-bottom: 1.1em;
    font-size: 16px;
}

article a:link, article a:visited {
    text-decoration: none;
    color: #9EB63C;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    -webkit-transition:border-bottom .5s;
    -moz-transition:border-bottom .5s;
    -ms-transition:border-bottom .5s;
     -o-transition:border-bottom .5s;
        transition:border-bottom .5s;
}

article a:hover, {
    text-decoration: none;
    color: #9EB63C;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    border-bottom: 1px dotted #10425E;
   -webkit-transition:border-bottom .5s;
    -moz-transition:border-bottom .5s;
    -ms-transition:border-bottom .5s;
     -o-transition:border-bottom .5s;
        transition:border-bottom .5s;

}

Answer 1

简单的语法问题。删除此规则中的逗号：

article a:hover, {
               ^--- remove this comma

演示：http://jsfiddle.net/94w8xb3a/2/

Answer 2

浏览器不仅仅为语法错误应用转换：

article a:hover, {中有一个逗号。

删除它并将应用转换（但用户不会发现差异）。

要解决这个谜团，你必须知道支持动画的属性是什么。作为参考，我通常使用Mozilla docs。

您会发现border-bottom属性会受到宽度和颜色的影响。 css中1px的宽度太薄，因为范围从0到1不等。

颜色是更好的解决方案，但您必须在中指定初始状态 article a:link, article a:visited通过添加以下属性之一来规则（或类似的）：

border-bottom: 1px dotted transparent;

或

border-bottom: 1px dotted #FFFFFF;

在link-hover上应用带有css过渡的border-bottom

2 个答案:

演示：http://jsfiddle.net/94w8xb3a/2/