Мигает пунктирной ссылкой

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

Кажется хаком, но это работает ...

Я хотел бы добавить, что вероятность пользователь фактически зависания точно на линии (что вызывает такое поведение) маловероятно, и, вероятно, не должен Не волнуйся. т. е. см. комментарии к вопросу, в котором люди, которые действительно пытались это сделать, не могли воспроизвести проблему.

Answer 2

ответ ЕНФ хорошо или вы можете взломать с помощью этого тоже в вашем стиле якоря:

display: inline-block; 
height: 40px;