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

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

Ben

Answer 4

Вам НЕ НУЖЕН 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>

Посмотрите на мой рабочий код: http://codepen.io/omarjuvera/pen/vGMezz

Answer 5

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

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

Answer 6

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

Answer 7

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