Удалить CSS-поведение «: hover» из элемента
В некоторых случаях я не хочу применять CSS для зависания. Одним из способов было бы просто удалить класс CSS из div с помощью jQuery, но это сломает другие вещи, так как я также использую этот класс для форматирования его дочерних элементов. Итак, это заставило меня задаться вопросом: есть ли способ удалить стили css c hover из элемента?
5 ответов
Я бы использовал два класса. Сохраните свой тестовый класс и добавьте второй класс под названием testhover, который вы добавите только тем, кого хотите навести, — наряду с тестовым классом. Это напрямую не то, что вы просили, но без дополнительного контекста оно кажется лучшим решением и, возможно, самым простым и простым способом сделать это. Пример: HTML:
Используйте псевдокласс класса :not , чтобы исключить классы, на которые вы не хотите применять зависание: FIDDLE
blahblahblah.test:not(.nohover):hover
Это сработало для меня, но я должен был сделать одно изменение, пробел перед :hover . Это может быть потому, что я использую SASS, не уверен.
Спасибо, я использовал это, чтобы отключить любые эффекты наведения на пользовательские кнопки для сенсорных устройств в моем приложении, добавив класс touchDevice в body и изменив мои правила CSS на что-то вроде body:not(.touchDevice) .button:hover < . >
Один из способов сделать это — добавить:
к элементу, на который вы хотите отключить наведение.
(обратите внимание: это также отключает события javascript на этом элементе, щелчок события на самом деле попадает в элемент позади).
Поддержка браузера (94.62% с 17 октября 2010 года)
Это кажется намного более чистым
/** * This allows you to disable hover events for any elements */ .disabled < pointer-events: none; /**.button < border-radius: 30px; padding: 10px 15px; border: 2px solid #000; color: #FFF; background: #2D2D2D; text-shadow: 1px 1px 0px #000; cursor: pointer; display: inline-block; margin: 10px; >.button-red:hover < background: red; >.button-green:hover
Im a red button hover over me
Im a green button hover over me
Im a disabled red button
Im a disabled green buttonЭтот ответ очень чистый и именно то, что я искал. Я использовал это раньше, но это все еще ново для меня, поэтому я часто забываю об этом.
@MarkBuikema это правда. Отредактировал ответ, чтобы отразить это. Во многих случаях это дополнительный бонус.
раздражает, что это не широко поддерживается. «Не меняйте форматирование при наведении курсора на tab.current» — это поведение, вероятно, предназначенное для большинства навигационных меню. Для тех, кто сообщает о том, чтобы просто использовать 2 класса, рассмотрим, насколько широко распространены библиотеки Bootstrap и Angular Styling на данный момент. Один не просто код 2 класса. Вы, вероятно, распутываете сторонние стили. Беспорядочный. Спасибо за информацию @Olivier-interfaSys Оливье-InterfaSys.
@EleanorZimmermann Я бы сказал, что это широко поддерживается. Во всем мире 90,97% пользователей. Но да, если вы беспокоитесь о IE9, вы должны предоставить другой класс.
@Bodman Бодман, хорошая информация, спасибо. Я использовал ваше решение (мне повезло, что мне не нужно беспокоиться о IE9).
Оптимальное решение для меня. Я хотел отключить все нижележащие функции, такие как событие нажатия. Сервер цели без отключения курсора. Большой!
События указателя @Bodman нет; Убрал изменение фона при наведении, но также отключил гиперссылку из моего элемента. Как убрать эффект парения, но сохранить гиперссылку?
@BioDeveloper в этом сценарии вы не можете использовать указатель-события: нет. Вам придется использовать одно из других решений.
Как убрать эффект «нажать кнопку» и сделать кнопку плоской даже при нажатии
Вы помечаете начальную загрузку . почему бы вам не использовать классы «btn» из начальной загрузки . это гораздо более эффективно и настраиваемо .
4 ответа
Когда вы используете bootstrap, вы можете увидеть в коде bootstrap.css следующее:
.btn < display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; >.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus < outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; >.btn:hover, .btn:focus, .btn.focus < color: #333; text-decoration: none; >.btn:active, .btn.active < background-image: none; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); >.btn.disabled, .btn[disabled], fieldset[disabled] .btn < cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .65; >a.btn.disabled, fieldset[disabled] a.btn < pointer-events: none; >.btn-default < color: #333; background-color: #fff; border-color: #ccc; >.btn-default:focus, .btn-default.focus < color: #333; background-color: #e6e6e6; border-color: #8c8c8c; >.btn-default:hover < color: #333; background-color: #e6e6e6; border-color: #adadad; >.btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default < color: #333; background-color: #e6e6e6; border-color: #adadad; >.btn-default:active:hover, .btn-default.active:hover, .open > .dropdown-toggle.btn-default:hover, .btn-default:active:focus, .btn-default.active:focus, .open > .dropdown-toggle.btn-default:focus, .btn-default:active.focus, .btn-default.active.focus, .open > .dropdown-toggle.btn-default.focus < color: #333; background-color: #d4d4d4; border-color: #8c8c8c; >.btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default < background-image: none; >.btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active < background-color: #fff; border-color: #ccc; >.btn-default .badge
Первая часть просто определяет свойства отображения для всех элементов классов «btn». Вторая часть определяет более конкретные параметры отображения для элементов «btn-default» (есть также btn-btn-warning и т.д.).
Если вы хотите настроить это, просто скопируйте код и измените имя как «btnCustom» и измените настройки. ИЛИ просто добавьте какой-то настраиваемый конкретный дисплей btn- *, например btn-pink или что-нибудь еще. Я часто использую это, чтобы сделать несколько цветных тем для кнопок, в моих проектах иногда у меня есть такие вещи, как btn-black, btn-purple.
Ниже код в качестве примера «btnCustom btnCustom-default», кнопка, которая не будет перемещаться, просто сохранит статичность с цветовой темой bootstrap «по умолчанию»:
.btnCustom < display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; >.btnCustom:hover, .btnCustom:focus, .btnCustom.focus < text-decoration: none; >.btnCustom:active, .btnCustom.active < background-image: none; >.btnCustom.disabled, .btnCustom[disabled], fieldset[disabled] .btnCustom < cursor: not-allowed; filter: alpha(opacity=65); opacity: .65; >a.btnCustom.disabled, fieldset[disabled] a.btnCustom < pointer-events: none; >.btnCustom-default < color: #333; background-color: #fff; border-color: #ccc; >.btnCustom-default:focus, .btnCustom-default.focus < color: #333; >.btnCustom-default:hover < color: #333; >.btnCustom-default:active, .btnCustom-default.active, .open > .dropdown-toggle.btnCustom-default < color: #333; >.btnCustom-default:active:hover, .btnCustom-default.active:hover, .open > .dropdown-toggle.btnCustom-default:hover, .btnCustom-default:active:focus, .btnCustom-default.active:focus, .open > .dropdown-toggle.btnCustom-default:focus, .btnCustom-default:active.focus, .btnCustom-default.active.focus, .open > .dropdown-toggle.btnCustom-default.focus < color: #333; >.btnCustom-default:active, .btnCustom-default.active, .open > .dropdown-toggle.btnCustom-default < background-image: none; >.btnCustom-default.disabled, .btnCustom-default[disabled], fieldset[disabled] .btnCustom-default, .btnCustom-default.disabled:hover, .btnCustom-default[disabled]:hover, fieldset[disabled] .btnCustom-default:hover, .btnCustom-default.disabled:focus, .btnCustom-default[disabled]:focus, fieldset[disabled] .btnCustom-default:focus, .btnCustom-default.disabled.focus, .btnCustom-default[disabled].focus, fieldset[disabled] .btnCustom-default.focus, .btnCustom-default.disabled:active, .btnCustom-default[disabled]:active, fieldset[disabled] .btnCustom-default:active, .btnCustom-default.disabled.active, .btnCustom-default[disabled].active, fieldset[disabled] .btnCustom-default.active < >.btnCustom-default .badge
Это выглядит довольно сложно или долго. Но это позволяет вам создать собственный стиль классов типа «bootstrap-like», который затем легко перезапускается, сохраните ваши изменения в файле customBootstrap.css и добавьте его в свой проект.
Как убрать эффект нажатия кнопки и сделать кнопку плоской даже при нажатии
Когда вы используете bootstrap, вы можете увидеть в коде bootstrap.css следующее:
.btn < display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; >.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus < outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; >.btn:hover, .btn:focus, .btn.focus < color: #333; text-decoration: none; >.btn:active, .btn.active < background-image: none; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); >.btn.disabled, .btn[disabled], fieldset[disabled] .btn < cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .65; >a.btn.disabled, fieldset[disabled] a.btn < pointer-events: none; >.btn-default < color: #333; background-color: #fff; border-color: #ccc; >.btn-default:focus, .btn-default.focus < color: #333; background-color: #e6e6e6; border-color: #8c8c8c; >.btn-default:hover < color: #333; background-color: #e6e6e6; border-color: #adadad; >.btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default < color: #333; background-color: #e6e6e6; border-color: #adadad; >.btn-default:active:hover, .btn-default.active:hover, .open > .dropdown-toggle.btn-default:hover, .btn-default:active:focus, .btn-default.active:focus, .open > .dropdown-toggle.btn-default:focus, .btn-default:active.focus, .btn-default.active.focus, .open > .dropdown-toggle.btn-default.focus < color: #333; background-color: #d4d4d4; border-color: #8c8c8c; >.btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default < background-image: none; >.btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active < background-color: #fff; border-color: #ccc; >.btn-default .badge
Первая часть просто определяет свойства отображения для всех элементов класса «btn». Вторая часть определяет более конкретные настройки отображения для элементов «btn-default» (есть также btn-success btn-warning и так далее . ).
Если вы хотите настроить это, просто скопируйте код и измените имя на «btnCustom» и отредактируйте настройки. ИЛИ просто добавьте какой-нибудь специальный дисплей btn- *, например btn-pink или что-нибудь в этом роде. Я часто использую это для создания нескольких цветовых тем кнопок, в моих проектах иногда используются такие вещи, как btn-black, btn-purple, .
Ниже приведен код в качестве примера «btnCustom btnCustom-default», кнопки, которая не перемещается, просто остается статичной с цветовой темой начальной загрузки «по умолчанию»:
.btnCustom < display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; >.btnCustom:hover, .btnCustom:focus, .btnCustom.focus < text-decoration: none; >.btnCustom:active, .btnCustom.active < background-image: none; >.btnCustom.disabled, .btnCustom[disabled], fieldset[disabled] .btnCustom < cursor: not-allowed; filter: alpha(opacity=65); opacity: .65; >a.btnCustom.disabled, fieldset[disabled] a.btnCustom < pointer-events: none; >.btnCustom-default < color: #333; background-color: #fff; border-color: #ccc; >.btnCustom-default:focus, .btnCustom-default.focus < color: #333; >.btnCustom-default:hover < color: #333; >.btnCustom-default:active, .btnCustom-default.active, .open > .dropdown-toggle.btnCustom-default < color: #333; >.btnCustom-default:active:hover, .btnCustom-default.active:hover, .open > .dropdown-toggle.btnCustom-default:hover, .btnCustom-default:active:focus, .btnCustom-default.active:focus, .open > .dropdown-toggle.btnCustom-default:focus, .btnCustom-default:active.focus, .btnCustom-default.active.focus, .open > .dropdown-toggle.btnCustom-default.focus < color: #333; >.btnCustom-default:active, .btnCustom-default.active, .open > .dropdown-toggle.btnCustom-default < background-image: none; >.btnCustom-default.disabled, .btnCustom-default[disabled], fieldset[disabled] .btnCustom-default, .btnCustom-default.disabled:hover, .btnCustom-default[disabled]:hover, fieldset[disabled] .btnCustom-default:hover, .btnCustom-default.disabled:focus, .btnCustom-default[disabled]:focus, fieldset[disabled] .btnCustom-default:focus, .btnCustom-default.disabled.focus, .btnCustom-default[disabled].focus, fieldset[disabled] .btnCustom-default.focus, .btnCustom-default.disabled:active, .btnCustom-default[disabled]:active, fieldset[disabled] .btnCustom-default:active, .btnCustom-default.disabled.active, .btnCustom-default[disabled].active, fieldset[disabled] .btnCustom-default.active < >.btnCustom-default .badge
Это выглядит довольно сложным или длинным. Но это позволяет вам создать свой собственный стиль классов css, «похожий на бутстрап», и затем его можно легко повторно использовать, сохраните ваши изменения в файле «customBootstrap.css» и добавьте его в свой проект.