Как отменить hover?
item с классом main должен иметь псевдоэлемент без hover:
Как это сделать? Можно ли как то отменить событие hover у элемента с классом current?
- Вопрос задан более года назад
- 246 просмотров
5 комментариев
Простой 5 комментариев
Ankhena @Ankhena Куратор тега CSS
Можно.
Можно добавлять hover всем кроме current
:not
gazes12 @gazes12 Автор вопроса
Ankhena, Я правильно задал?
.nav__item < position: relative; padding-top: 9px; &:hover:not(.nav__item--current)< &::after< height: 8px; >> &::after < content: ''; position: absolute; width: 100%; height: 0px; top: 0; left: 0; background: red; transition: all .3s linear; >&.current < &::after< background: #1bf; >> >
Ankhena @Ankhena Куратор тега CSS
gazes12, нет.
Во-первых, нет элемента с .nav__item—current , у вас current это отдельный класс, а не модификатор.
Во-вторых, у ховера не может быть :not, он у селектора.
Вы можете самостоятельно в этом убедиться, открыв скомпилированный css. И просто в браузере.
Должно выйти так:
.item:not(.current):hover <>
просто добавить в конце
.nav:hover .current::after < height: 0; >.nav .current::after, .nav .current:hover::after
Ankhena @Ankhena Куратор тега CSS
Можно и без :not так, всё равно ведь псевдо задаете.
.nav__item < position: relative; padding-top: 9px; &:hover < &::after < height: 8px; >> &::after < content: ""; position: absolute; width: 100%; height: 0px; top: 0; left: 0; background: gray; transition: all 0.3s linear; >&.current < &::after < background: #000; height: 8px; >> >Как можно убрать :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 css
Можно использовать свойство pointer-events: none; в CSS для этого элемента.
a.disabled pointer-events: none; > Это уберет данный эффект для ссылки с классом disabled . Стоит обратить внимание, что при использовании этого свойства элемент не будет реагировать ни на какие события мыши, включая нажатия.
Отменить hover
На блоке установлен hover, в блоке еще один блок. Допустим, навели на родителя, hover сработал. Как отменить hover на родителе, когда курсор расположен на дочернем блоке?
Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
CSS (hover) отменить действие последнего hover на все элементы
Всем доброго времени суток. У меня следующая загвоздка: нашел скрипт для выпадающих меню. Подогнал.
Hover в IE
В IE hover отображается коряво Как это можно исправить?
A:hover
Не срабатывает, что делать? /*Цвет ссылки при наведении на неё мышки*/.
32 / 25 / 12
Регистрация: 24.01.2011
Сообщений: 509
Сообщение было отмечено gogolik как решение
Решение
1 2 3
div class="container hover"> div class="block">/div> /div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
.container{ width: 150px; height: 150px; background-color: green; } .hover:hover{ background-color: yellow; } .block{ width: 50px; height: 50px; background-color: red; } .block:hover{ background-color: blue; }
1 2 3 4 5 6 7
const block = document.querySelector('.block'); block.addEventListener('mouseover', ()=>{ document.querySelector('.container').classList.toggle('hover'); }) block.addEventListener('mouseout', ()=>{ document.querySelector('.container').classList.toggle('hover'); })
Регистрация: 06.03.2014
Сообщений: 3,066
Без js, возможно реализовать?
2572 / 1664 / 728
Регистрация: 13.03.2010
Сообщений: 5,566
Gerd199, нет.
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
:hover в IE
Вот такой вопрос: Не работают все стили с псевдоклассом :hover в IE, причём во всех версиях, а не.
Hover
Здравствуйте. Как сделать hover как тут: http://faridos.com/test На верхних иконках. Кружочек при.
Отменить стили
Здравствуйте, уважаемые форумчане! Как реализовать следующую вещь: Есть код <h2.
Отменить !important
Добрый день Сайт на битриксе и в шаблоне есть поля унаследованные из таблицы стилей с !important.