Как добавить эффект поднятия текста при наведении на него курсора?
2 ответа
На чистом CSS это будет выглядеть так.
.fly-on-hover span{
display: inline-block;
}
.fly-on-hover:hover span{
// Для более плавного эффекта, если не нужно — можно удалить.
transition: transform 300ms;
transform: translateY(-10px);
}
<div class="fly-on-hover">
<span>Text</span>
</div>
Еще вариант через позиционирование:
.container {
margin: 20px;
}
.text {
position: relative;
}
.text:hover {
top: -5px;
}
<div class="container">
<span class="text">Текст</span>
</div>
-
@entithat Странно, проверила сейчас в файрфоксе и хроме - вроде, ведет себя прилично)– maridu21 ноя 2017 в 20:45
-
-
-
@maridu, Я не случайно проверяю hover на родительский блок а не на сам текст. Увеличьте высоту позиционирования и увидите что текст начнет прыгать) К тому же свойство top вызывает перерисовывание layout, этот способ стоит применять только для устаревших браузеров. 25 ноя 2017 в 11:37
-