Как можно убрать :hover у элемента через JS или CSS?
Примените два класса к соответствующему элементу. Один содержит поведение при наведении, а другой содержит все остальные стили. Вот метод, позволяющий удалить класс с поведением при наведении реализованный на jQuery :
$(element).removeClass('hover'); Вот реализация этих же действий на нативном JS :
element.classList.remove('hover'); //element это уже полученный узел DOM Отслеживать
2,075 1 1 золотой знак 8 8 серебряных знаков 22 22 бронзовых знака
ответ дан 3 авг 2021 в 19:20
Maxim Kuskov Maxim Kuskov
359 1 1 серебряный знак 6 6 бронзовых знаков
Вoпросы с меткой [javascript] но без метки какой-либо библиотеки (и без явного контекста ее использования) предполагают ответы на чистом JavaScript’e. Это имеет значение, т.к. метки тематические: они помогают участникам находить именно те ответы, которые нужны. Конечно, в случаях когда сторонняя библиотека сама по себе является решением — уместно предлагать, но в данном случае стандартных возможностей достаточно: element.classList.remove(‘hover’); . Прошу отнестись с пониманием и учитывать тематику вопросов.
3 авг 2021 в 19:57
Несколько проще и быстрее будет через CSS таким образом, при наведение на все элементы которые не disabled будет срабатывать cursor: pointer
.btn:not([disabled]):hover
Отмена эффекта от :hover
Есть меню, в некоторых пунктах подменю. При открытии сайта на компьютерах и в разрешениях до 768px применяться эффект через псевдо класс :hover. Так вот проблема в том, что мне нужно как то отменить эффект наведения ниже разрешения 768px, (видимо как то в медиа запросе это возможно сделать) а затем, на разрешениях ниже 768px применять скрипт jQuery, который есть ниже по переключению класса. В приоритете — как активизировать мой скрипт jQuery только на разрешениях ниже 768px. Как это возможно реализовать? Вот меню:
$('.toggle-menu').click(function() < $('.toggle-menu').removeClass('active'); $(this).toggleClass('active'); >);
.topmenu < display: flex; flex-wrap: wrap; backface-visibility: hidden; background: #fff; >.topmenu>li < display: inline-block; position: relative; >.topmenu>li>a < height: 30px; line-height: 30px; padding: 0 7px; font-weight: bold; color: #6EA3DD; text-transform: uppercase; transition: .1s ease-in-out; border-bottom: 2px solid #fff; >.topmenu>li>a.actual-menu < border-bottom: 2px solid #FBC7CB; >.down:after < content: ''; position: absolute; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid #6EA3DD; left: 47%; bottom: -7px; z-index: 100; >.topmenu li a:hover < color: #E6855F; border-bottom: 2px solid #FBC7CB; transition: .1s ease-in-out; >.submenu < background: white; border: 2px solid #95BCE6; position: absolute; left: 5%; right: -35%; visibility: hidden; opacity: 0; padding: 0 10px 5px; z-index: 150; transition: .1s ease-in-out; transform: translate(0%, 15px); >.topmenu>li:hover .submenu < visibility: visible; opacity: 1; transform: translate(0%, 0px); >.active
Отслеживать
задан 22 июн 2018 в 4:59
355 4 4 серебряных знака 17 17 бронзовых знаков
Нужно именно отменить те эффекты которые есть у элемента с :hover, а не добавлять что то другое
22 июн 2018 в 7:00
Да, Максим, нужно чтобы на ссылку ‘a’ уже не действовал псевдоэлемент :hover при разрешении ниже 768px. Так как будто его нет вообще
22 июн 2018 в 7:12
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Что бы отменить действие hover достаточно сделать по умолчанию то что вы делаете при событие hover .
Здесь Вы это увидите если посмотрите пример сначала свёрнутый а потом развёрнутый на всю страницу
* < list-style: none; text-decoration: none; >ul < display:inline-block; >ul a, ul span < font-weight: 900; color: blue; >li ul < display: none; >li:hover ul < display: block; >@media (max-width:768px) < li ul < display: block; >>по поводу второго вопроса , как включать script при при определённом разрешении экрана. Делается это так:
$(window).on("load resize", function() < if ($(document).width() < 768) < $.getScript("script.js"); >>);Отслеживать
ответ дан 22 июн 2018 в 7:32
user33274 user33274
Если слегка отойти в сторону от вашего вопроса, то само по себе создание выпадающих меню при наведении — это антипаттерн в интерфейсах, просто по той причине, что человек без мышки или человек, который не может адекватно воспользоваться мышкой, не сможет раскрыть это меню. Как минимум, стоит добавить открытие меню по фокусу на элемент.
Далее, я бы на вашем месте не привязывался к определенному разрешению при загрузке и подключению скрипта-обработчика, потому что во-первых, айпэды сейчас пусть и начинаются с 768 пикселей по ширине в портретном режиме, но есть также и ландшафтный, а есть и еще много всего, кроме айпэдов. А во-вторых, есть, к примеру, ноутбуки с сенсорным экраном, а какие устройства будут через год — никому точно неизвестно.
В общем, я бы сделал как-то так:
window.addEventListener('touchstart', function firstTouch () < document.body.classList.add('touch-device') window.removeEventListener('touchstart', firstTouch, false) >, false) document.documentElement.addEventListener('touchstart', function (e) < var dropdownBtn = document.querySelector('.down') if (e.target.matches('.down')) < dropdownBtn.classList.toggle('down--active') >else < dropdownBtn.classList.remove('down--active') >>).topmenu < display: flex; flex-wrap: wrap; backface-visibility: hidden; background: #fff; >.topmenu>li < display: inline-block; position: relative; >.topmenu>li>a < height: 30px; line-height: 30px; padding: 0 7px; font-weight: bold; color: #6EA3DD; text-transform: uppercase; transition: .1s ease-in-out; border-bottom: 2px solid #fff; >.topmenu>li>a.actual-menu < border-bottom: 2px solid #FBC7CB; >.down:after < content: ''; position: absolute; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid #6EA3DD; left: 47%; bottom: -7px; z-index: 100; >.topmenu li a:hover < color: #E6855F; border-bottom: 2px solid #FBC7CB; transition: .1s ease-in-out; >.submenu < background: white; border: 2px solid #95BCE6; position: absolute; left: 5%; right: -35%; visibility: hidden; opacity: 0; padding: 0 10px 5px; z-index: 150; transition: .1s ease-in-out; transform: translate(0%, 15px); >:not(.touch-device) .down:hover + .submenu, :not(.touch-device) .down:focus + .submenu, .down.down--active + .submenu, .submenu:focus-within
- Определять использовался ли тач;
- построить логику ховера и фокуса, основываясь на классе .touch-device ;
- добавить в логику :focus-within ;
- не подгружать скрипт в зависимости от разрешения.
Как отключить hover css
Можно использовать свойство pointer-events: none; в CSS для этого элемента.
a.disabled pointer-events: none; > Это уберет данный эффект для ссылки с классом disabled . Стоит обратить внимание, что при использовании этого свойства элемент не будет реагировать ни на какие события мыши, включая нажатия.
Сделать так, чтобы :hover не срабатывал на дочернем элементе
Это всплывающее окно. #bg — темный полупрозрачный фон на все окно браузера, #content — собственно окно с контентом и #close — кнопка закрытия. Как сделать так, чтобы #close окрашивался в красный только когда курсор выходит за #content . Сейчас он срабатывает везде.
Отслеживать
3,651 1 1 золотой знак 9 9 серебряных знаков 23 23 бронзовых знака
задан 31 окт 2017 в 16:50
1,211 2 2 золотых знака 16 16 серебряных знаков 35 35 бронзовых знаков
4 ответа 4
Сортировка: Сброс на вариант по умолчанию
#bg < background: rgba(0,0,0,.5); position: absolute; width: 100%; height: 100%; >#bg:hover #close < background: red; >#content:hover #close < background: initial; >#content
Повесит ховер на «#content #close». И лучше не стилизовать по id
Отслеживать
ответ дан 31 окт 2017 в 17:17
user271410 user271410
471 2 2 серебряных знака 11 11 бронзовых знаков
Да, это рабочий вариант, но по сути это перезапись bg. Я так понял он хочет совсем его отключить.
31 окт 2017 в 17:19
Можно переопределить фон по умолчанию другим селектором:
#bg:hover #close < background: red;>#content:hover #close #content
Content
Background