Що протилежне: наведення курсора (у відпустці миші)?

Чи є якийсь спосіб зробити протилежне :hover використання лише CSS? Як у: якщо :hoverє on Mouse Enter, чи існує CSS, еквівалентний on Mouse Leave?

Приклад:

У мене є меню HTML за допомогою елементів списку. Коли я наведіть курсор на один із елементів, з'являється кольорова анімація CSS від #999до black. Як я можу створити зворотний ефект, коли миша залишає область предмета, з анімацією від blackдо #999?

jsFiddle

(Майте на увазі, що я не хочу відповідати лише на цей приклад, а на всю :hoverпроблему "протилежно ".)

Якщо я правильно розумію, ви можете зробити те ж саме, перемістивши переходи на посилання, а не в режим наведення курсора:

ul li a {
    color:#999;       
    transition: color 0.5s linear; /* vendorless fallback */
    -o-transition: color 0.5s linear; /* opera */
    -ms-transition: color 0.5s linear; /* IE 10 */
    -moz-transition: color 0.5s linear; /* Firefox */
    -webkit-transition: color 0.5s linear; /*safari and chrome */
}

ul li a:hover {
    color:black;
    cursor: pointer;
}

http://jsfiddle.net/spacebeers/sELKu/3/

Визначення наведення курсора:

Селектор: наведіть курсор, щоб вибрати елементи при наведенні на них курсором миші.

За цим визначенням протилежною курсору є будь-яка точка, в якій миша не над нею. Хтось набагато розумніший за мене зробив цю статтю, встановивши різні переходи в обох станах - http://css-tricks.com/different-transitions-for-hover-on-hover-off/

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}

Просто використовуйте переходи CSS замість анімації.

A {
    color: #999;
    transition: color 1s ease-in-out;
}

A:hover {
    color: #000;
}

Демонстраційна демонстрація

Ні, немає явного властивості для залишення миші в CSS.

Ви можете використовувати: навести курсор на всі інші елементи, крім предмета, про який йдеться, щоб досягти цього ефекту. Але я не впевнений, наскільки це було б практично.

Я думаю, що ви повинні подивитися на рішення JS / jQuery.

Ви можете використовувати перехід CSS3

Деякі хороші посилання:

http://css-tricks.com/different-transitions-for-hover-on-hover-off/

http://www.alistapart.com/articles/understanding-css3-transitions/

Хоча відповідей тут достатньо, я дійсно думаю, що приклад W3Schools у цьому питанні є дуже простим (він відразу усунув плутанину (для мене)).

Використовуйте :hoverселектор, щоб змінити стиль кнопки під час переміщення миші на неї.

Порада: Використовуйте властивість тривалості переходу, щоб визначити швидкість ефекту "наведення":

Приклад

.button {
    -webkit-transition-duration: 0.4s; /* Safari & Chrome */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

Підсумовуючи це, для переходів, де ви хочете, щоб анімація "введення" та "вихід" була однаковою, вам потрібно використовувати переходи на головному селекторі, .buttonа не на курсорі вибору .button:hover. Для переходів, де ви хочете, щоб анімації "введення" та "виходу" були різними, вам потрібно вказати різні основні переходи селектора та наведення курсора.

Помістіть час тривалості у виборі без наведення курсора:

li a {
  background-color: #111;
  transition:1s;
}

li a:hover {
  padding:19px;
}

Просто додайте перехід до елемента, з яким ви возиться. Майте на увазі, що при завантаженні сторінки можуть виникнути певні ефекти. Як якщо б ви змінили радіус кордону, ви побачите це, коли купол завантажується.

.element {
  width: 100px;
  transition: all ease-in-out 0.5s;
}
 
 .element:hover {
  width: 200px;
    transition: all ease-in-out 0.5s;
}

Ви неправильно зрозуміли :hover; в ньому йдеться про те, що миша над предметом, а не щойно миша вводила елемент.

Ви можете додати анімацію до селектора, не :hoverдосягаючи потрібного ефекту.

Переходи - кращий варіант: http://jsfiddle.net/Cvx96/

:hoverЗдається, навпаки :link.

(Редагування: технічно не протилежний , тому що є 4 селектор :link, :visited, :hoverі :activeп'ять , якщо включити. :focus) .

Наприклад, визначаючи правило .button:hover{ text-decoration:none }для видалення підкреслення на кнопці, підкреслення відображається, коли ви відкручуєте кнопку в деяких браузерах. Я це виправив.button:hover, .button:link{ text-decoration:none }

Це, звичайно, працює лише для елементів, які є фактично посиланнями (мають атрибут href)

Просто додайте перехід та назву анімації для класу inicial, у вашому випадку ul li a, просто додайте властивість "перехід", і це все, що вам потрібно

ul li {
    display: inline;
    margin-left: 20px;
}

ul li a {
    color: #999;
    transition: 1s;
    -webkit-animation: item-hover-off 1s;
    -moz-animation: item-hover-off 1s;
    animation: item-hover-off 1s;
}

ul li a:hover {
    color: black;
    cursor: pointer;
    -webkit-animation: item-hover 1s;
    -moz-animation: item-hover 1s;
    animation: item-hover 1s;
}

@keyframes item-hover {
    from {
      color: #999;
      }
    to {
      color: black;
      }
}
    
@-moz-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}
    
@-webkit-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}

@keyframes item-hover-off {
    from {
      color: black;
      }
    to {
      color: #999;
      }
}
    
@-moz-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}
    
@-webkit-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}

<ul>
    <li><a>Home</a></li>
    <li><a>About</a></li>
    <li><a>Contacts</a></li>
</ul>