Что противоположно: hover (при отпускании мыши)?

Есть ли способ сделать наоборот, :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/

Определение зависания:

Селектор: hover используется для выбора элементов при наведении на них указателя мыши.

По этому определению противоположностью наведения является любая точка, в которой указатель мыши не находится над ней. Кто-то намного умнее меня написал эту статью, установив разные переходы для обоих состояний - 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 нет явного свойства для выхода мыши.

Вы можете использовать: hover для всех остальных элементов, кроме рассматриваемого, чтобы добиться этого эффекта. Но я не уверен, насколько это будет практично.

Я думаю, вам стоит взглянуть на решение JS / jQuery.

Вы можете использовать переход CSS3

Несколько хороших ссылок:

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

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

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

Используйте :hoverселектор, чтобы изменить стиль кнопки, когда вы наводите на нее указатель мыши.

Совет: используйте свойство transition-duration, чтобы определить скорость эффекта "зависания":

пример

.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;
}

Просто добавьте переход к элементу, с которым вы возитесь. Имейте в виду, что при загрузке страницы могут быть некоторые эффекты. Например, если вы изменили радиус границы, вы увидите это при загрузке dom.

.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).

Просто добавьте переход и имя анимации в исходный класс, в вашем случае ul li a, просто добавьте свойство «transition», и это все, что вам нужно.

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>