Eliminar el comportamiento CSS ': hover' del elemento

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

HTML:

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

CSS:

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

En algunos casos, no quiero aplicar CSS al pasar el mouse por encima. 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 preguntar: ¿hay alguna forma de eliminar el estilo CSS 'hover' de un elemento?

Yo usaría dos clases. Mantenga su clase de prueba y agregue una segunda clase llamada testhover que solo agrega a aquellos que desea desplazar, junto con la clase de prueba. Esto no es directamente lo que pidió, pero sin más contexto, se siente como la mejor solución y es posiblemente la forma más sencilla y limpia de hacerlo.

Ejemplo:

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

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

Un método para hacer esto es agregar:

pointer-events:none;

al elemento en el que desea deshabilitar el desplazamiento sobre.

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

Soporte de navegador (97.04% a partir del 22 de agosto de 2019)

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>

Use la :notpseudoclase para excluir las clases a las que no desea que se aplique el elemento emergente:

VIOLÍN

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

agregue una nueva clase .css:

#test.nohover:hover { border: 0 }

y

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

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

También tuve este problema, mi solución fue tener un elemento sobre el elemento sobre el 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>

Desea conservar el selector, por lo que agregarlo / eliminarlo no funcionará. En lugar de escribir un selector CSS rápido y duro (o dos), quizás solo pueda usar el selector original para aplicar una nueva regla CSS a ese elemento según algún criterio:

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