html - 在链接悬停时应用带有 css 过渡的边框底部

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/