Question

我想询问是否有一个解决方案，因为我遇到虚线链接会带来一些不便。

为了节省你的时间，这是我的代码的一个例子，当它专门悬停在实际链接下面的虚线时，它开始极大地闪烁并且它在美学上并不具有吸引力。我对css很新，所以我想知道我的代码是否有错误。

p {
    font-size: 35px;
}
a {
    text-decoration: none;
    color:#ff0089;
    text-decoration: none;
    border-bottom-color: #ff0089;
    border-bottom-width: 2px;
    border-bottom-style: dashed;
    -o-transition:color .2s ease-out, background 1s ease-in;
    -ms-transition:color .2s ease-out, background 1s ease-in;
    -moz-transition:color .2s ease-out, background 1s ease-in;
    -webkit-transition:color .2s ease-out, background 1s ease-in;
    transition:color .2s ease-out, background 1s ease-in;
}
a:hover {
    color:#eae327;
    background: none;
    border-bottom-style: none;
}

http://jsfiddle.net/j86ba/

很有责任。

Answer 1

这是因为悬停时边框消失 - 转动悬停功能。那么这条线再次出现在onHover再次......（循环）

我找到的解决方案是将color设置为white（或者，无论您的背景是什么），而不是将style设置为none。（我尝试将width设置为0，但效果相同。

See fiddle

看似hackish，但它确实有效......

我想添加，用户实际上完全悬停在线上的概率（触发此行为）是不太可能的，可能不应该担心你。即，请参阅有关实际尝试实现这一目标的人无法重现问题的评论。

Answer 2

JNF的回答很好，或者您也可以通过锚定风格来解决这个问题：

display: inline-block;
height: 40px;

闪烁的虚线链接

2 个答案: