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

Ответ 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;
}

Ответ 2

Просто используйте CSS-переходы вместо анимации.

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

A:hover {
    color: #000;
}

Живая демоверсия

Ответ 3

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

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

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

Ответ 4

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

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

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

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

Ответ 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;
}