Что является противоположностью: наведите курсор (на мыши оставить)?

Question

Что является противоположностью: наведите курсор (на мыши оставить)?

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

пример:

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

jsFiddle

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

708 7

css hover

7 ответов:

Comments

Ничего не найдено.

SpaceBeers · Accepted Answer · 2018-02-07 21:58:17

Если я правильно понимаю, вы можете сделать то же самое, переместив свои переходы в ссылку, а не в состояние наведения:
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:

селектор :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;
}

Marat Tanalin · Accepted Answer · 2017-07-04 16:01:40

просто использовать CSS переходы вместо анимации.
A {
    color: #999;
    transition: color 1s ease-in-out;
}

A:hover {
    color: #000;
}
демо

Moin Zaman · Accepted Answer · 2012-06-12 13:52:04

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

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

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

SVS · Accepted Answer · 2012-06-12 14:00:49

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

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

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

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

Alex Chamberlain · Accepted Answer · 2012-06-12 13:56:42

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

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

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

scripter · Accepted Answer · 2015-07-13 01:55:42

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

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

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

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

Govind Rai · Accepted Answer · 2016-09-28 07:37:01

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