He CSS que los cambios de formato cuando se coloca el ratón sobre un elemento.

HTML:

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

CSS:

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

En algunos casos, no quiero aplicar CSS en hover. Una manera sería simplemente eliminar clase CSS del div con jQuery, pero eso sería romper otras cosas, ya que yo también uso esa clase de formato de sus elementos secundarios.

Así que me llevó a la pregunta: ¿hay una manera de eliminar el ‘hover’ el estilo css de un elemento?

InformationsquelleAutor dev.e.loper | 2011-02-21

6 Comentarios

  1. 41

    Me gustaría utilizar dos clases. Mantener tu clase de prueba y agregar una segunda clase llamada testhover que sólo se suman a aquellos que usted quiere que pase -, junto a la clase de prueba. Esto no es directamente lo que pedí, pero sin más contexto se siente como la mejor solución y es posiblemente el más limpio y más sencilla manera de hacerlo.

    Ejemplo:

    CSS:

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

    HTML:

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

  2. 248

    Un método para hacer esto es agregar:

    pointer-events:none;

    para el elemento que desea desactivar el puntero del mouse sobre.

    (nota: esto también deshabilita javascript eventos en que el elemento, haga clic en eventos en realidad va a caer a través del elemento detrás ).

    Compatibilidad Del Navegador ( 97.04% a partir de Agosto 22,2019 )

    Esto parece ser mucho más limpio

    CSS:

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

    HTML:

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

    • Buena respuesta, es sólo incompatible en IE < 11, así que no es mucho de un problema.
    • Esta respuesta es muy limpio y es exactamente lo que estaba buscando. Yo he usado antes, pero todavía es nuevo para mí, así que a menudo se olvidan de él.
    • Exactamente lo que yo necesitaba perfecto 😀
    • Upvote para los eventos de puntero ninguno. Esto era lo que buscaba.
    • La desactivación de puntero-eventos desactiva haga clic en eventos…
    • esto es cierto. Editado la respuesta a reflejar eso. En muchos casos es una ventaja añadida.
    • molesto que este no está ampliamente soportado. «no cambiar el formato de pase de la ficha.actual» es un comportamiento que, probablemente, la intención en la mayoría de los menús de navegación. Para aquellos que informaron simplemente, el uso de 2 clases, considere la manera en que prevalece, Bootstrap, Angulares y de estilo de las bibliotecas en este punto. Uno no simplemente el código de 2 clases. Usted probablemente desenredar la 3ª parte de los estilos. Desordenado. Gracias por la info @Olivier-interfaSys .
    • Yo diría que esto es ampliamente apoyado. A nivel mundial 90.97% de los usuarios. Pero sí, si usted está preocupado acerca de IE9 , usted debe proveer de otra clase.
    • buena info, gracias. Acabé el uso de su solución (tengo la suerte de que yo no necesita preocuparse acerca de IE9).
    • Buena solución para mí. Yo quería desactivado todos los debajo de funcionalidades como haga clic en evento así. Servidor de la finalidad sin desactivar el cursor. Genial!!!
    • puntero-eventos: ninguno; se ha Eliminado el pase de fondo, el cambio, pero también la movilidad de hipervínculo de mi elemento. Cómo eliminar el efecto de hover, pero conservan hipervínculo?
    • en este escenario, no se puede utilizar el puntero-eventos:ninguno. Usted tendrá que utilizar una de las otras soluciones.
    • perfecta respuesta, gracias!
    • Esto debe ser aceptado respuesta. Gracias.

  3. 224

    Utilizar el :not pseudo-clase a excluir a las clases que usted no desea que el hover para aplicar a:

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

    Este hace lo que usted quiere en una regla css!

    • Sin duda, la mejor soluttion! Menos código y funciona bien en todos los navegadores.
    • Esto funcionó para mí, pero tenía que hacer un cambio, un espacio antes de la :hover. Esto puede ser porque estoy usando SASS, no estoy seguro.
    • Gracias, he usado esto para deshabilitar los efectos hover en botones personalizados para dispositivos táctiles en mi aplicación mediante la adición de touchDevice clase a body y cambio de reglas css a algo como body:not(.touchDevice) .button:hover { ... }
    • Yepp, que la solución es mucho mejor.
  4. 2

    agregar una nueva .clase css:

    #test.nohover:hover { border: 0 }

    y

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

    El más «específicos» regla css gana, por lo tanto esta frontera:0 versión anulará la genérica que se especifique de otra manera.

    • Va. Y va a cambiar la apariencia predeterminada, que es diferente. Por lo que habrá siempre un navegador en el que pase será visible.
  5. 1

    También he tenido este problema, mi solución era tener un elemento sobre el elemento no quiero un efecto de hover en:

    CSS:

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

    HTML:

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

    • interesante solución.
  6. -2

    Desea mantener el selector, por lo que la adición/extracción no va a funcionar. En lugar de escribir un duro y rápido selectores de CSS (o dos), tal vez usted puede utilizar el selector original para aplicar la nueva regla CSS para que el elemento sobre la base de algún criterio:

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

Dejar respuesta

Please enter your comment!
Please enter your name here