В чем противоположность: наведите указатель мыши (на мышь)?

Есть ли способ сделать противоположное от :hover , используя только CSS? Как и в случае: если :hover равно on Mouse Enter, существует ли эквивалент CSS для on Mouse Leave?

Пример:

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

jsFiddle

(Имейте в виду, что я не хочу отвечать только на этот пример, но проблема с "противоположностью :hover".)

ОТВЕТЫ

Ответ 1

Если я правильно понимаю, вы могли бы сделать то же самое, переместив переходы в ссылку, а не в состояние наведения:

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

Ответ 3

Нет никакого явного свойства для разрешения мыши в CSS.

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

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

Ответ 5

Вы неправильно поняли :hover; он говорит, что мышь находится над элементом, а не только мышь только что ввела элемент.

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

Переходы - лучший вариант: http://jsfiddle.net/Cvx96/

Ответ 6

Противоположность :hover выглядит как :link.

(edit: не технически наоборот, потому что есть 4 селектора :link, :visited, :hover и :active. Пять, если вы включили :focus.)

Например, при определении правила .button:hover{ text-decoration:none } для удаления подчеркивания на кнопке подчеркивание появляется, когда вы откатываете кнопку в некоторых браузерах. Я исправил это с помощью .button:hover, .button:link{ text-decoration:none }

Это, конечно, работает только для элементов, которые на самом деле являются ссылками (имеют атрибут href)

Ответ 7

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

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

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

Пример

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

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

Итак, для переходов, где вы хотите, чтобы анимации "enter" и "exit" были одинаковыми, вам нужно использовать переходы на основном селекторе .button, а не селектор hover .button:hover. Для переходов, в которых вы хотите, чтобы анимации "enter" и "exit" были разными, вам нужно будет указать разные переходы селектора и селектора.

Ответ 8

Поместите время в поле без зависания:

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

li a:hover {
  padding:19px;
}