Foros del Web » Creando para Internet » CSS »

varios hover en el mismo

Estas en el tema de varios hover en el mismo en el foro de CSS en Foros del Web. tengo un hover en una imagen para que esta cambie por otra imagen al pasar el ratón, pero también quiero hacer otro hover en la ...
  #1 (permalink)  
Antiguo 22/07/2014, 01:21
 
Fecha de Ingreso: junio-2014
Mensajes: 70
Antigüedad: 9 años, 9 meses
Puntos: 0
varios hover en el mismo

tengo un hover en una imagen para que esta cambie por otra imagen al pasar el ratón, pero también quiero hacer otro hover en la misma imagen para que aparezca un tooltip personalizado. La opción es simple, pero serian dos hover. de que forma se hace?

tengo un

.facebook {}
.facebook:hover {}


y quiero incluir

.tooltipshare {}
.tooltipshare:hover:after {}
.tooltipshare:hover:before {}

Según he leído es incluyendo un "+" pero no se donde exactamente.
  #2 (permalink)  
Antiguo 22/07/2014, 03:02
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: varios hover en el mismo

No puedes tener un :hover para cambiar imágenes. Si acaso estás cambiando un fondo, que sea un fondo con una imagen es diferente a una imagen, sobre todo en HTML/CSS.

:hover es una pseudo-clase que responde ante una acción, luego existir sólo existe una acción. Pero la pseudo-clase como tal puedes usarlas tantas veces necesites.

Código HTML:
Ver original
  1. <div class="algo">
  2.   <p>Hola</p>
  3.   <strong>¿Qué tal?</strong>
  4. </div>
  5. <div class="otracosa">Adios</div>
  6. <div class="otracosa">Adios</div>
  7. <div class="otracosa">Adios</div>
  8. <div class="otracosa">Adios</div>

Puedes afectar a cada elemento de esta forma:

Código CSS:
Ver original
  1. div.algo:hover p {
  2.   color: red;
  3. }
  4.  
  5. div.algo:hover strong {
  6.   color: blue;
  7. }
  8.  
  9. div.algo:hover ~ div.otracosa {
  10.   color: brown;
  11.   background: #ddd;
  12. }
  13.  
  14. div.algo:hover + div.otracosa {
  15.   color: gold;
  16. }

Son selectores + y ~ son selectores de hermanos adyacentes posteriores. El primero selecciona el elemento inmediato y el otro todos los elementos que le siguen.

Funcionando:
  #3 (permalink)  
Antiguo 22/07/2014, 03:59
 
Fecha de Ingreso: junio-2014
Mensajes: 70
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: varios hover en el mismo

No me funciona lo que dices Pzin.

A ver, a lo que me referia con cambio de imagen, es que tengo una encima de otra en el mismo archivo, y con hover solo indico que cambie la posicion al pasar el raton por encima.

Lo tengo asi:

Código CSS:
Ver original
  1. .facebook {
  2.      margin: 0px 30px 0px 0px;
  3.      float: left;
  4.      width: 32px;
  5.      height: 32px;
  6.      position: relative;
  7. }
  8.  
  9. .facebook {
  10.     display: block;
  11.     width: 32px;
  12.     height: 32px;
  13.     overflow: hidden;
  14.     background: url(") left top no-repeat;
  15. }
  16.  
  17. .facebook:hover {
  18.    background-position: left bottom;
  19. }


y quiero incluirle esto:

Código CSS:
Ver original
  1. .tooltip {
  2.       display: inline;
  3.       position: relative;
  4.   }
  5.  
  6.   .tooltip:hover:after {
  7.       background: #333;
  8.       background: rgba(0,0,0,.8);
  9.       border-radius: 5px;
  10.       bottom: 26px;
  11.       color: #fff;
  12.       content: attr(title);
  13.       left: 20%;
  14.       padding: 5px 15px;
  15.       position: absolute;
  16.       z-index: 98;
  17.       width: 220px;
  18.   }
  19.  
  20.   .tooltip:hover:before {
  21.       border: solid;
  22.       border-color: #333 transparent;
  23.       border-width: 6px 6px 0 6px;
  24.       bottom: 20px;
  25.       content: "";
  26.       left: 50%;
  27.       position: absolute;
  28.       z-index: 99;
  29.   }

pero no puedo cambiar la clase "tooltip" por la de "facebook" porque me interfiere la informacion de uno con la de otro
  #4 (permalink)  
Antiguo 22/07/2014, 04:25
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: varios hover en el mismo

Puedes usar ambos perfectamente. No veo porqué no. En una afectas al elemento directamente y en el otro creas pseudo-elementos a los que afectas.
  #5 (permalink)  
Antiguo 22/07/2014, 04:37
 
Fecha de Ingreso: junio-2014
Mensajes: 70
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: varios hover en el mismo

Cita:
Iniciado por pzin Ver Mensaje
Puedes usar ambos perfectamente. No veo porqué no. En una afectas al elemento directamente y en el otro creas pseudo-elementos a los que afectas.
pues no tengo idea como.....porque no me esta saliendo cuando lo intento....

Puedes decirme como por favor?
  #6 (permalink)  
Antiguo 23/07/2014, 06:07
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: varios hover en el mismo

Cita:
Iniciado por macaluan Ver Mensaje
pues no tengo idea como.....porque no me esta saliendo cuando lo intento...
¿Y cómo lo has intentado? No sé cómo esperas a que te ayuden si no pones las cosas que has hecho. Habrá que indicarte el error, y no se puede indicar si no sabemos qué has hecho o intentado hacer. Todo lo demás es pedir código hecho.
  #7 (permalink)  
Antiguo 23/07/2014, 08:04
 
Fecha de Ingreso: junio-2014
Mensajes: 70
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: varios hover en el mismo

No pido codigo hecho.

Te puse el codigo de lo que estaba haciendo unas lineas mas arriba, lo viste, y dijiste que si se podia.

Lo unico que habeis hecho es eliminar mis mensajes.....
  #8 (permalink)  
Antiguo 23/07/2014, 14:33
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: varios hover en el mismo

Cita:
Iniciado por macaluan Ver Mensaje
No pido codigo hecho.

Te puse el codigo de lo que estaba haciendo unas lineas mas arriba, lo viste, y dijiste que si se podia.
Si, se pueden juntar ambos conceptos. Dijiste que lo intentaste, pero ni dijiste como. Así pues, ¿cómo lo intentaste?

Y si, te borré los mensajes porque no se puede subir un tema por subirlo, y los otros porque no aportaban demasiado al tema.

Etiquetas: hover
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:25.