CSS :hover Selector
The :hover selector is used to select elements when you mouse over them.
Tip: The :hover selector can be used on all elements, not only on links.
Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.
Note: :hover MUST come after :link and :visited (if they are present) in the CSS definition, in order to be effective!
| Version: | CSS1 |
|---|
Browser Support
The numbers in the table specifies the first browser version that fully supports the selector.
| Selector | |||||
|---|---|---|---|---|---|
| :hover | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
Упразднить псевдокласс :hover с помощью CSS
В мобильной версии сайта, выпадающее меню хочу реализовать через клик. Чтобы отменить эффект hover по медиа-запросу, в соседних темах советуют сделать так:
.menu:hover > .sub_menu
Но данная конструкция не отменяет hover , а переопределяет его. В итоге имеем такую ситуацию, когда меню раскрывается по клику, а если увести мышку с меню и завести обратно, то срабатывает display:none . Хотелось бы избежать такой ситуации и просто упразднить эффект hover . Можно ли так сделать на CSS не задействуя JS?
Отслеживать
задан 18 фев 2018 в 8:43
6,741 1 1 золотой знак 21 21 серебряный знак 57 57 бронзовых знаков
У тебя на мобильнике hover сработает как click .
18 фев 2018 в 8:51
@Air ну, я пока только на ноуте тестю)
18 фев 2018 в 8:51
А ты на мобильнике попробуй))))
18 фев 2018 в 8:52
@Air не, ну hover — это mouseenter — он на click и не будет срабатывать). Речь-то о другом. Что и click и hover — будут работать вместе и иметь противоположные эффекты.
Как убрать\отменить :hover на мобильных?
Возникла проблема. Есть десктопная версия сайта, есть меню и при наведении на элементы меню срабатывает обычный css :hover который выводит подсписки. Для десктопа нормально все. Но вот чем меньше экран тем хуже, вместо меню сделал аккордеон но предыдушие :hover эффекты ломают его (не нужное появление элементов при наведении или таче). Можно как то отключить вообще :hover эффект для маленьких разрешений что бы работать чисто через js+классы?
- Вопрос задан более трёх лет назад
- 3020 просмотров
отменить событие .hover при отведении курсора
Подскажите пожалуйста как отменить событие .hover при отведении курсора? (Если убрать курсор) то все вернется на свои места.
$('.mix-content li').hover(function()< $('.mix-content li').removeClass('is-active'); $(this).addClass('is-active'); >);.mix-content li.is-active < background-color: purple; color: #fff; >.mix-content
Отслеживать
задан 20 ноя 2017 в 20:56
beaviz0405 beaviz0405
130 1 1 серебряный знак 10 10 бронзовых знаков
Зачем для для hover использовать js, есть же css
20 ноя 2017 в 21:03
там в сигнатуре либо два коллбэка прописывается, один для mouseenter второе для mouseleave, либо один колбэк но через параметр можно узнать, что из них произошло. Но если ваша цель только изменить внешний вид, используйте :hover в стилях и все.
20 ноя 2017 в 21:21
Можно сделать с помощью toggleClass , что бы не убирать, а потом добавлять класс. Ваш пример, без особых изменений jsfiddle.net/w3h6j8y9
20 ноя 2017 в 21:21
Я понимаю, что hover можно сделать на css, в данном примере нужен js, потому-что у первого элемента есть class, который нужно убирать.
20 ноя 2017 в 21:56
@Arantler hover поддерживается всеми браузерами и уже давно.
21 ноя 2017 в 16:19
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Вроде я правильно понял.
var elem = document.querySelectorAll('li'); for (let i = 0; i < elem.length; i++) < elem[i].addEventListener('mouseenter', function() < for (let i = 0; i < elem.length; i++) < elem[i].classList.remove('is-active'); >elem[i].classList.remove('is-active'); elem[i].classList.add('is-active'); >) elem[i].addEventListener('mouseout', function() < elem[i].classList.remove('is-active'); >) >.mix-content li.is-active < background-color: purple; color: #fff; >.mix-content
Отслеживать
ответ дан 21 ноя 2017 в 10:07
14.5k 6 6 золотых знаков 33 33 серебряных знака 71 71 бронзовый знак
Зачем использовать JS, если можно сделать все на стилях?
.mix-content li.is-active:hover < background-color: purple; color: #fff; >.mix-content
Отслеживать
ответ дан 20 ноя 2017 в 21:22
97 8 8 бронзовых знаков
Не одинаково, он попросил, что бы событие отменялось при отводе курсора, тоесть , что бы отменялась перекраска при отведении курсора.
20 ноя 2017 в 21:29
в событии hover нужно указывать1 или 2 функции
// 1 вариант .hover( function() < // блок выполнится при обоих событиях >); //2 вариант .hover( function() < // тут блок для mouseover >, function() < // а тут для mouseout >); функция1 (обязательный параметр) Задает функцию, код которой выполнится, когда на выбранный элемент будет наведен курсор мыши. Если в параметрах события hover Вы укажите только одну функцию ее код будет также выполнен при выводе курсора мыши за его пределы.
функция2 (необязательный параметр) Задает функцию, код которой будет выполнен, когда курсор мыши покинет пределы выбранного элемента.
в твоем случае я думаю так:
$('.mix-content li').hover(function()< $(this).toggleClass('is-active'); >); $('.mix-content li').hover(function()< $(this).addClass('is-active'); >, function() < $(this).removeClass('is-active'); >);