изменить стиль границы в: hover state в Firefox

61
5

У меня проблема с применением изменения в стиле границы в Firefox. Мой код:

.wizardCircle{
position: relative;
background: #fff;
display: inline-block;
margin: auto;
height: 45px;
line-height: 40px;
font-weight: bold;
width: 45px;
border: 3px solid;
border-radius: 50%;
text-align: center;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#wizardRow>div:hover .wizardCircle{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
border-style: dotted;
}

Проблема существует только в FF. Я попытался использовать border: 3px dotted 3px dotted insted border-style и также !important Important, но это также не работает. CSS- transform работает во всех браузерах. Структура HTML:

  <div id="wizardRow" class="row">
<div class="col-xs-2 wizardCompleted">
<a href="#"><span class="wizardCircle"><span class="glyphicon glyphicon-ok"></span></span></a>
<a href="#"><span class="wizardDesc">Tekst</span></a>
</div>
</div>

спросил(а) 2021-01-19T17:56:43+03:00 2 месяца, 3 недели назад
1
Решение
87

Ваш border-radius уменьшает точечную границу.

На этой скрипке вы можете видеть лучше.

#wizardRow>div:hover .wizardCircle{
...
border-radius: 25%;
....
}

Если вы поместите небольшое значение, можно будет увидеть изменения.

На самом деле это происходит потому, что ваш круг имеет весь радиус, когда вы говорите, что ваш бокс будет иметь border-radius: 50%, вы говорите, что каждый угол займет 50% границы. Затем не будет отображаться оставшееся пространство на границе. Итак, происходит то, что свойство border-style не влияет на пространство пограничного радиуса.

Причиной этого является ошибка в способе, которым Firefox предоставляет свойство border-radius.

ответил(а) 2021-01-19T17:56:43+03:00 2 месяца, 3 недели назад
76

К сожалению, вы не можете этого сделать, поскольку это открытая ошибка в Firefox:

Отчет об ошибке

Если вы удалите border-radius он будет работать правильно.

ответил(а) 2021-01-19T17:56:43+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема