Что противоположно: hover (on mouse leave)?

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

пример:

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

jsFiddle

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

88
css hover

7 ответов

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

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

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

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

A:hover {
    color: #000;
}

Live demo

13

нет явного свойства для мыши leave в CSS.

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

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

5

вы можете использовать CSS3 transition

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

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

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

2

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

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

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

0

напротив :hover кажется :link.

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

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

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

0

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

использовать :hover селектор для изменения стиля кнопки при перемещении мышь над ним.

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

пример

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

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

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

0