style - link html

Eliminar el comportamiento de CSS '': hover'' del elemento

Question

Tengo CSS que cambia el formato cuando pasas el mouse sobre un elemento.

HTML:

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

CSS:

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

En algunos casos, no quiero aplicar CSS en el vuelo estacionario. Una forma sería simplemente eliminar la clase CSS del div usando jQuery, pero eso rompería otras cosas ya que también uso esa clase para formatear sus elementos secundarios.

Eso me llevó a cuestionarme: ¿hay alguna forma de eliminar el estilo cvs ''hover'' de un elemento?

Answer 1

Desea mantener el selector, por lo que agregarlo / quitarlo no funcionará. En lugar de escribir un selector de CSS (o dos) rápido y rápido, tal vez solo pueda usar el selector original para aplicar una nueva regla de CSS a ese elemento en función de algún criterio:

$(".test").hover(
  if(some evaluation) {
    $(this).css(''border'':0);
  }
);

Answer 2

También tuve este problema, mi solución fue tener un elemento sobre el elemento que no quiero un efecto de desplazamiento:

.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>

Answer 3

Un método para hacer esto es agregar:

pointer-events:none;

al elemento que desea deshabilitar sobrevuelo.

(nota: esto también deshabilita los eventos de javascript en ese elemento también, los eventos de clic en realidad caerán al elemento detrás).

Compatibilidad con el navegador (95.13% a partir del 21 de marzo de 2012)

Esto parece ser mucho más limpio

/**
* 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>

Answer 4

Use la clase :not pseudo-class para excluir las clases a las que no desea que se aplique el elemento emergente:

FIDDLE

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

.test:not(.nohover):hover {  
    border: 1px solid red; 
}

¡Esto hace lo que quieres en una regla CSS!

Answer 5

Yo usaría dos clases. Conserve su clase de prueba y agregue una segunda clase llamada testhover, que solo agregará a las que desee colocar junto a la clase de prueba. Esto no es lo que preguntaste directamente, pero sin más contexto se siente como la mejor solución y es posiblemente la forma más limpia y simple de hacerlo.

Ejemplo:

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; }

Answer 6

agregar una nueva clase .css:

#test.nohover:hover { border: 0 }

y

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

La regla de CSS más "específica" gana, por lo que este borde: la versión 0 anulará la genérica especificada en otra parte.