Блог

Главная - Вопросы по программированию - Как запустить анимацию, когда вы перестаете наводить курсор на текст?

Как запустить анимацию, когда вы перестаете наводить курсор на текст?

#html #css #animation #css-animations

Вопрос:

Я был бы очень рад, если бы кто-нибудь мог мне помочь.

Я создаю панель навигации для веб-сайта и сделал анимацию, которая при наведении курсора мыши на ссылку медленно меняет цвет. Я сделал это с помощью ключевых кадров CSS. Кто-нибудь знает, как сделать так, чтобы, когда вы перестанете наводить на него курсор, он снова медленно возвращался к базовому цвету, а не просто менялся в одно мгновение. Заранее спасибо за все ответы.

Комментарии:

1. Укажите соответствующий код в вопросе

2. Также это можно было бы сделать с помощью простого transition свойства вместо ключевых кадров

Ответ №1:

Это медленно преобразует зеленый текст в черный:

 <html>
    <head>
        <style>
#h1 {
    color: green;
    transition: all 2s linear;
    font-size: 50px;
}

#h1:hover {
    color: black;
}
        </style>
    </head>
    <body>
<h1 id="h1">hello</h1>
    </body>
</html>

Перед зависанием:

изображение

После зависания:

изображение

Комментарии:

1. Я думаю, вы меня неправильно поняли. Я хочу, чтобы при наведении курсора мыши на текст он медленно менял цвет, а когда я убираю от него мышь (перестаю парить), он медленно меняет свой цвет обратно на тот, который был до того, как я начал парить.

2. это значит, что исходный цвет зеленый, и когда вы наводите на него курсор, он становится черным, а когда мышь не наведена, он возвращается к исходному цвету

3. да, но он не медленно возвращается к исходному цвету, когда он перешел от исходного цвета к черному

4. какой браузер вы используете

5. Я использую opera gx.

Метки: ,