Удалить': hover ' CSS поведение из элемента

Question

Удалить': hover ' CSS поведение из элемента

У меня есть CSS, который изменяет форматирование при наведении указателя мыши на элемент.

HTML:

<div class="test"> blah </div>

CSS:

.test:hover {  border: 1px solid red; }

в некоторых случаях я не хочу применять CSS при наведении. Один из способов - просто удалить класс CSS из div с помощью jQuery, но это нарушит другие вещи, так как я также использую этот класс для форматирования его дочерних элементов.

Итак, это привело меня к вопросу: есть ли способ удалить стиль css "hover" из элемента?

783 6

html css

6 ответов:

Comments

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

biscuitstack · Accepted Answer · 2011-02-21 19:33:11

Я бы использовал два класса. Сохраните свой тестовый класс и добавьте второй класс под названием testhover, который вы добавляете только к тем, которые хотите навести - рядом с тестовым классом. Это не прямо то, что вы спросили, но без дополнительного контекста это кажется лучшим решением и, возможно, самый чистый и простой способ сделать это.

пример:

HTML:
<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test testhover"> blah </div>
CSS:
.test {  border: 0px; }
.testhover:hover {  border: 1px solid red; }

Danield · Accepted Answer · 2013-09-17 11:04:11

использовать :not псевдо-класс для исключения классов, к которым вы не хотите применять наведение:

скрипка
<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test nohover"> blah </div>

.test:not(.nohover):hover {  
    border: 1px solid red; 
}
это делает то, что вы хотите в одном правиле css!

Bodman · Accepted Answer · 2018-03-21 19:10:01

один из способов сделать это, чтобы добавить:
pointer-events:none;
к элементу, который вы хотите отключить наведите указатель мыши.

(Примечание: это также отключает события javascript на этом элементе тоже, нажмите события будут на самом деле падать до элемента позади ).

Поддержка Браузеров (95,13% по состоянию на 21 марта 2018г.)

Это, кажется, гораздо чище
/**
* This allows you to disable hover events for any elements
*/
.disabled {
  pointer-events: none;  /**<-----------*/
  opacity: 0.2;
}

.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 {
  background:green;  
}
<div class="button button-red">Im a red button hover over me</div>

<br/>

<div class="button button-green">Im a green button hover over me</div>

<br/>

<div class="button button-red disabled">Im a disabled red button</div>

<br/>

<div class="button button-green disabled">Im a disabled green button</div>

Marc B · Accepted Answer · 2011-02-21 19:27:32

добавить новый .класс css:
#test.nohover:hover { border: 0 }
и
<div id="test" class="nohover">blah</div>
более" конкретное " правило css выигрывает, поэтому эта версия border:0 переопределит общую версию, указанную в другом месте.

Florentin Stemate · Accepted Answer · 2018-04-05 11:47:24

у меня также была эта проблема, мое решение состояло в том, чтобы иметь элемент над элементом, на который я не хочу наводить эффект:
.no-hover {
  position: relative;
  opacity: 0.65 !important;
  display: inline-block;
}

.no-hover::before {
  content: '';
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<button class="btn btn-primary">hover</button>
<span class="no-hover">
  <button class="btn btn-primary ">no hover</button>
</span>

buley · Accepted Answer · 2011-02-21 19:30:41

вы хотите сохранить селектор, поэтому добавление/удаление его не будет работать. Вместо того, чтобы писать жесткие и быстрые селекторы CSS (или два), возможно, вы можете просто использовать исходный селектор для применения нового правила CSS к этому элементу на основе некоторого критерия:
$(".test").hover(
  if(some evaluation) {
    $(this).css('border':0);
  }
);