¿Qué es lo contrario de: hover (en la licencia del mouse)?

¿Hay alguna manera de hacer lo contrario de :hover utilizando sólo ¿CSS? como en: si :hover is on Mouse Enter, ¿hay un CSS equivalente a on Mouse Leave?

Ejemplo:

Tengo un menú HTML que usa elementos de lista. Cuando paso el cursor sobre uno de los elementos, hay una animación de color CSS de #999 a black. ¿Cómo puedo crear el efecto contrario cuando el mouse abandona el área del elemento, con una animación de black a #999?

jsviolín

(Tenga en cuenta que no deseo responder solo a este ejemplo, sino a todo el "opuesto de :hover" asunto.)

preguntado el 12 de junio de 12 a las 11:06

¿Qué estás tratando de hacer exactamente? Tal vez hay una alternativa diferente? -

Lo contrario a :hover es bastante simple :not(:hover); sin embargo, :hover is no sinónimo de onmouseenter ni es :not(:hover) lo mismo que onmouseleave. CSS no tiene ningún concepto de eventos DOM. -

@Cthulhu: :hover simplemente significa "un elemento que tiene un puntero de mouse sobre él". No indica si el puntero del mouse pasó de otro elemento a este elemento. Simplemente significa que el puntero del mouse está actualmente en el elemento. -

@BoltClock :not(:hover) ¿realmente se activaría algo? -

@Moin Zaman: Sí. Siempre que su mouse no esté sobre un elemento determinado, entonces :not(:hover) se aplicará. Aquí hay una demostración: jsfiddle.net/BoltClock/rghBX -

11 Respuestas

Si entiendo correctamente, podría hacer lo mismo moviendo sus transiciones al enlace en lugar del estado de desplazamiento:

ul li a {
    color:#999;       
    transition: color 0.5s linear; /* vendorless fallback */
    -o-transition: color 0.5s linear; /* opera */
    -ms-transition: color 0.5s linear; /* IE 10 */
    -moz-transition: color 0.5s linear; /* Firefox */
    -webkit-transition: color 0.5s linear; /*safari and chrome */
}

ul li a:hover {
    color:black;
    cursor: pointer;
}

http://jsfiddle.net/spacebeers/sELKu/3/

La definición de flotar es:

El selector :hover se usa para seleccionar elementos cuando pasa el mouse sobre ellos.

Según esa definición, lo contrario de pasar el mouse por encima es cualquier punto en el que se mueva el mouse. no encima de eso. Alguien mucho más inteligente que yo ha escrito este artículo, estableciendo diferentes transiciones en ambos estados: http://css-tricks.com/different-transitions-for-hover-on-hover-off/

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}

Respondido 07 Feb 18, 19:02

"(Tenga en cuenta que no deseo responder solo a este ejemplo, sino a todo el problema "lo contrario de :hover")" - Cthulhu

@Cthulhu: he editado mi respuesta ahora. Eso podría ayudar un poco más. Pensé que era una respuesta demasiado obvia. - SpaceCervezas

+1 por señalarme en la dirección correcta. Estaba teniendo una discrepancia de animación entre navegadores. Chrome estaba renderizando todo más suave, pero tenía .1s diferentes en las transiciones y Mozilla e IE mostraban el error. Pude arreglarlo haciendo coincidir mis números de transición. - término

Puaj. La definición de :hover que ha citado es de W3Schools, que de ninguna manera es una fuente autorizada. La especificación real se puede encontrar en w3.org/TR/CSS21/selector.html#dynamic-pseudo-clases, aunque no es la explicación más accesible. - marca amery

Sólo tiene que utilizar Transiciones CSS en lugar de animaciones.

A {
    color: #999;
    transition: color 1s ease-in-out;
}

A:hover {
    color: #000;
}

Demo en vivo

Respondido 04 Jul 17, 14:07

Como dije en el ejemplo, mi problema no es con la animación, sino con la parte "al dejar el mouse". - Cthulhu

La transición funciona tanto al pasar el mouse como al dejarlo. Es suficiente especificar estilos para el estado normal y :hover Expresar. - marat tanalin

¿Cómo se detiene la transición en el instante en que se carga la página web? - Caminante de nubes

@CloudWalker No estoy seguro de lo que quieres decir. La transición no se puede detener, retrocede cuando el selector ya no coincide. - marat tanalin

Por ejemplo, si tiene una transición en el color del texto de negro a blanco, en el instante en que se carga el texto, cambia de blanco a negro (la misma duración que la duración de la transición). No estoy seguro si esto es un problema de mi parte. - Caminante de nubes

Lo contrario es usar :not

p.ej

selection:not(:hover) { rules }

Respondido 13 Feb 21, 00:02

¿CÓMO no es esta la respuesta aceptada? ¡Eso es exactamente lo que ha pedido el OP! - bruno brant

Esto es algo que deseaba mucho. <3 - Harish

Qué buena respuesta, estaba mezclando el color con la imagen de fondo de div al pasar el mouse pero no obtuve la animación al dejar el mouse. Usé esta respuesta para mezclar nuevamente el color blanco con la imagen de fondo engañando a CSS. - Ahmed Ali

¡¡Esta es la respuesta correcta!! ¡¡gracias!! - ssdar

No, no hay una propiedad explícita para dejar el mouse en CSS.

Puede usar :pasar el cursor sobre todos los demás elementos, excepto el elemento en cuestión, para lograr este efecto. Pero no estoy seguro de cuán práctico sería eso.

Creo que tienes que mirar una solución JS/jQuery.

Respondido el 12 de junio de 12 a las 11:06

JS no es necesario en este caso, y ahora lo desaconsejaría, aunque sea una justificación del rendimiento. - alex chambelán

No es necesario para el ejemplo anterior, pero parece ser la mejor solución para todo el problema de la "licencia del mouse". - Cthulhu

Ponga su tiempo de duración en la selección sin desplazamiento:

li a {
  background-color: #111;
  transition:1s;
}

li a:hover {
  padding:19px;
}

Respondido 25 ago 19, 17:08

En mi caso esto ayudó. Volvería al valor predeterminado. - Norbert

Simplemente agregue una transición al elemento con el que está jugando. Tenga en cuenta que podría haber algunos efectos cuando se carga la página. Como si hiciera un cambio en el radio del borde, lo verá cuando cargue el dom.

.element {
  width: 100px;
  transition: all ease-in-out 0.5s;
}
 
 .element:hover {
  width: 200px;
    transition: all ease-in-out 0.5s;
}

Respondido 09 Feb 20, 14:02

Respondido el 12 de junio de 12 a las 12:06

Aunque las respuestas aquí son suficientes, realmente creo W3Schools El ejemplo sobre este tema es muy sencillo (aclaró la confusión (para mí) de inmediato).

Use el :hover Selector para cambiar el estilo de un botón cuando pasa el mouse sobre él.

Consejos: Utilice la propiedad de duración de la transición para determinar la velocidad del efecto de "desplazamiento":

Ejemplo

.button {
    -webkit-transition-duration: 0.4s; /* Safari & Chrome */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

En resumen, para las transiciones en las que desea que las animaciones de "entrar" y "salir" sean las mismas, debe emplear transiciones en el selector principal .button en lugar del selector flotante .button:hover. Para las transiciones en las que desea que las animaciones de "entrar" y "salir" sean diferentes, deberá especificar diferentes transiciones del selector principal y del selector flotante.

Respondido el 28 de Septiembre de 16 a las 05:09

Solo agregue una transición y el nombre de la animación en la clase inicial, en su caso, ul li a, solo agregue una propiedad de "transición" y eso es todo lo que necesita

ul li {
    display: inline;
    margin-left: 20px;
}

ul li a {
    color: #999;
    transition: 1s;
    -webkit-animation: item-hover-off 1s;
    -moz-animation: item-hover-off 1s;
    animation: item-hover-off 1s;
}

ul li a:hover {
    color: black;
    cursor: pointer;
    -webkit-animation: item-hover 1s;
    -moz-animation: item-hover 1s;
    animation: item-hover 1s;
}

@keyframes item-hover {
    from {
      color: #999;
      }
    to {
      color: black;
      }
}
    
@-moz-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}
    
@-webkit-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}

@keyframes item-hover-off {
    from {
      color: black;
      }
    to {
      color: #999;
      }
}
    
@-moz-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}
    
@-webkit-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}
<ul>
    <li><a>Home</a></li>
    <li><a>About</a></li>
    <li><a>Contacts</a></li>
</ul>

respondido 06 nov., 19:16

has entendido mal :hover; dice que el mouse está sobre un elemento, en lugar de que el mouse acaba de ingresar al elemento.

Puede agregar animación al selector sin :hover para lograr el efecto que desea.

Transitions es una mejor opción: http://jsfiddle.net/Cvx96/

Respondido el 12 de junio de 12 a las 11:06

Su violín no produce el resultado previsto. - govind rai

Lo contrario a :hover parece ser :link.

(editar: técnicamente no es lo opuesto porque hay 4 selectores :link, :visited, :hover y :active. Cinco si incluyes :focus.)

Por ejemplo, al definir una regla .button:hover{ text-decoration:none } para quitar el subrayado de un botón, el subrayado aparece cuando quitas el botón en algunos navegadores. He arreglado esto con .button:hover, .button:link{ text-decoration:none }

Esto, por supuesto, solo funciona para elementos que en realidad son enlaces (tienen atributo href)

Respondido 12 Jul 15, 23:07

Su información es incorrecta. :link simplemente selecciona enlaces, tan simple como eso. Mira aquí la definición de :link: developer.mozilla.org/en-US/docs/Web/CSS/%3Aenlace - Cthulhu

@ Strive55 Ahhh, gracias, eso tiene sentido. El enlace que proporcionaste dice que "Para aplicar el estilo adecuado a los enlaces, debes colocar la regla :link antes que las demás, tal como se define en el orden LVHA: :link — :visited — :hover — :active". Si lo entiendo correctamente, eso significa que si no se aplica ninguno de los otros selectores (: visitado,: pasar el mouse o: activo), entonces : enlace es el que se aplica. Técnicamente no es lo opuesto, porque hay 4, pero aún funciona: scripter

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.