Как сделать a: hover постепенно иметь другой цвет

Привет, Мое меню имеет цвет #006699, при наведении я хочу, чтобы постепенно перейти к цвету #4796E9. Это возможно?

6
colors css html javascript

7 ответов

Да, вы можете сделать это с помощью jQuery. CSS Tricks имеет учебник под названием меню выцветания цвета с помощью jQuery здесь.

13

вы также можете достичь этого с помощью 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;
8

Это похоже на то, что вы могли бы сделать, используя jQuery.

Бен

2

вам не нужен 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

1

Я не думаю, что это возможно с помощью CSS. Но вы можете сделать это с помощью javascript. Попробуйте fadeIn эффект в jquery.

0

здесь плагин, который кто-то сделал с JQuery, который делает это.

0

с JavaScript (вы можете сделать это легко с помощью метода jQuery animate ()) или анимации webkit CSS:http://webkit.org/blog/138/css-animation/ (Обратите внимание, что этот метод работает только в WebKit).

Я рекомендую маршрут JavaScript -- используя фреймворк, такой как jQuery или scriptaculous. Информация о методе анимации jQuery здесь:http://docs.jquery.com/Effects/animate

0