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

Question

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

Пример:

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

jsFiddle

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

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

Answer 2

Нет там нет явного недвижимости для отпуска мыши в CSS ,

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

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

Answer 3

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

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

A:hover { 
    color: #000; 
} 

Live demo

Answer 4

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

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

Transitions это лучший вариант: http://jsfiddle.net/Cvx96/

Answer 5

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

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

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

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

Answer 6

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

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

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

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

Answer 7

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

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

Совет: Используйте свойство переходной продолжительности для определения скорости в «парение» эффект:

Пример

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

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

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