Как сделать a: hover постепенно иметь другой цвет
Привет,
Мое меню имеет цвет #006699
, при наведении я хочу, чтобы постепенно
перейти к цвету #4796E9
.
Это возможно?
7 ответов
вы также можете достичь этого с помощью CSS3 (он будет работать во всех браузерах, кроме IE9 и ниже). Вот пример:
-webkit-transition: color 0.2s ease-out;
-moz-transition: color 0.2s ease-out;
-ms-transition: color 0.2s ease-out;
-o-transition: color 0.2s ease-out;
transition: color 0.2s ease-out;
вам не нужен JavaScrip!!!
Это можно легко сделать с помощью CSS3 transitions
<style>
nav {
transition: background-color 0.5s ease;
background-color: #006699;
color: white;
}
nav:hover {
background-color: #4796E9;
}
</style>
<nav>
<h1>This menu changes color GRADUALLY on mouse-hover</h1>
</nav>
посмотрите на мой рабочий codepen:http://codepen.io/omarjuvera/pen/vGMezz
Я не думаю, что это возможно с помощью CSS. Но вы можете сделать это с помощью javascript. Попробуйте fadeIn эффект в jquery.
с JavaScript (вы можете сделать это легко с помощью метода jQuery animate ()) или анимации webkit CSS:http://webkit.org/blog/138/css-animation/ (Обратите внимание, что этот метод работает только в WebKit).
Я рекомендую маршрут JavaScript -- используя фреймворк, такой как jQuery или scriptaculous. Информация о методе анимации jQuery здесь:http://docs.jquery.com/Effects/animate