varios hover en el mismo

[macaluan]

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.

[pzin]

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:

<div class="algo">
  <p>Hola</p>
  <strong>¿Qué tal?</strong>
</div>
<div class="otracosa">Adios</div>
<div class="otracosa">Adios</div>
<div class="otracosa">Adios</div>
<div class="otracosa">Adios</div>
 

Puedes afectar a cada elemento de esta forma:

Código CSS:

div.algo:hover p {
  color: red;
}
 
div.algo:hover strong {
  color: blue;
}
 
div.algo:hover ~ div.otracosa {
  color: brown;
  background: #ddd;
}
 
div.algo:hover + div.otracosa {
  color: gold;
}
 

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:

[macaluan]

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:

.facebook {
     margin: 0px 30px 0px 0px; 
     float: left;
     width: 32px;
     height: 32px;
     position: relative;
}
 
.facebook {
    display: block;
    width: 32px;
    height: 32px;
    overflow: hidden;
    background: url(") left top no-repeat;
}
 
.facebook:hover {
    background-position: left bottom;
}
 

y quiero incluirle esto:

Código CSS:

.tooltip {
      display: inline;
      position: relative;
  }
  
  .tooltip:hover:after {
      background: #333;
      background: rgba(0,0,0,.8);
      border-radius: 5px;
      bottom: 26px;
      color: #fff;
      content: attr(title);
      left: 20%;
      padding: 5px 15px;
      position: absolute;
      z-index: 98;
      width: 220px;
  }
  
  .tooltip:hover:before {
      border: solid;
      border-color: #333 transparent;
      border-width: 6px 6px 0 6px;
      bottom: 20px;
      content: "";
      left: 50%;
      position: absolute;
      z-index: 99;
  }
 

pero no puedo cambiar la clase "tooltip" por la de "facebook" porque me interfiere la informacion de uno con la de otro

[pzin]

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.

[macaluan]

Iniciado por pzin

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?

[pzin]

Iniciado por macaluan

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.

[macaluan]

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

[pzin]

Iniciado por macaluan

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.