Переход - Затухание и синтаксис webkit

91
10

Эта кнопка исчезает должным образом, но вместо того, чтобы исчезнуть, когда больше не зависает над ней, клипы тоже. Что нужно сделать для этого, чтобы работать на сафари?

Вот мой код:

.iob:hover {
text-shadow: 0 0 10px green;
transition: .25s;
transition-duration: 0.25s;
transition-timing-function: ease-in-out;
}
.iob {
cursor: pointer;
margin-left: 30px;
padding: 8px 18px;
color: #52AEC9;
}
<a href="https://www.google.com/?gws_rd=ssl" style="text-decoration:none;" target="_blank">
<p class="iob">Information</p>
</a>

Благодарю!

спросил(а) 2016-07-07T23:50:00+03:00 4 года, 3 месяца назад
1
Решение
121

РЕШЕНИЕ ::

Вам нужно изменить свойство transition на нормальное состояние элемента.

ОБЪЯСНЕНИЕ:

Я ранее объяснял разницу в этом сообщении:

В чем разница между применением свойства перехода CSS в зависании, а не в его нормальном состоянии?

ПРИМЕЧАНИЕ:

Я рекомендую удалить встроенный стиль в теге <a> и создать его в внешнем файле CSS для лучшей поддержки и разделения проблем. Выполните следующие действия:

Заменить:

style="text-decoration:none;"

С:

.iob-anchor,
.iob-anchor:hover{
text-decoration: none;
}

CODE SNIPPET:

.iob-anchor,
.iob-anchor:hover{
text-decoration: none;
}

.iob {
cursor: pointer;
margin-left: 30px;
padding: 8px 18px;
color: #52AEC9;
transition: .25s;
transition-duration: 0.25s;
transition-timing-function: ease-in-out;
}

.iob:hover {
text-shadow: 0 0 10px green;
}

<a class="iob-anchor" href="https://www.google.com/?gws_rd=ssl" target="_blank">
<p class="iob">Information</p>
</a>

ответил(а) 2016-07-08T00:10:00+03:00 4 года, 3 месяца назад
41

.iob:hover {
text-shadow: 0 0 10px green;
}
.iob {
cursor: pointer;
margin-left: 30px;
padding: 8px 18px;
color: #52AEC9;
/*transition: 2.5s;*/
transition-duration: 2.5s;
transition-timing-function: ease-in-out;
}
<a href="https://www.google.com/?gws_rd=ssl" style="text-decoration:none;" target="_blank">
<p class="iob">Information</p>
</a>

вы можете написать переход: 2,5-дюймовый доступ в режиме ожидания; ИЛИ длительность перехода...

Я сделал продолжительность намного дольше, чтобы вы могли видеть ее лучше. отлично работает в сафари 9.x. Если вы хотите узнать больше о переходе, на css-tricks.com есть все, что вам нужно знать. https://css-tricks.com/almanac/properties/t/transition/

ответил(а) 2016-07-08T00:00:00+03:00 4 года, 3 месяца назад
41

Ваш переход должен быть добавлен в основной класс, как этот

.iob {
cursor: pointer;
margin-left: 30px;
padding: 8px 18px;
color: #52AEC9;
transition: .25s;
transition-duration: 0.25s;
transition-timing-function: ease-in-out;
}

ответил(а) 2016-07-07T23:56:00+03:00 4 года, 3 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

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