在链接悬停时在CSS过渡上应用Border-Bottom

Question

我希望在链接悬停时显示一条虚线（平滑过渡）。我尝试了以下方法，但没有成功。有什么问题 非常感谢，

参见http://jsfiddle.net/94w8xb3a/1/

 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/