CSS imagenes que aparecen al hacer click?

[lbrm]

Como hago si tengo una imagen y quisiera que al pasar el mouse aparezca otra imagen a su lado.

Usando comportamientos "behaviors" sé como hacerlo, pero veo que ahora es casi todo usando CSS3.

como se hace eso usando CSS?

Gracias

[lbrm]

No me funciona, lo que quiero es que al pasar el mouse sobre class "boton" me muestre class "imagen" al lado

Aqui les dejo el código

Html

<div class="boton" id="boton"><img src="images/botones_r1_c1.png" width="500" height="150" /></div>
<div class="imagen" id="imagen"><img src="images/botones2.png" width="500" height="150" /></div>

Css

.imagen{
display: none;
}
.boton:hover .imagen{
display : block;
}

[No_haynombre]

Hombre y si lo pillas un poco por Jquery, estoy casi seguro que hay una función que puede hacer, voy a investigar y os digo

[No_haynombre]

Código Javascript:

$(document).ready(function(){
        $("#mostrar").on( "click", function() {
            $('#target').show(); //muestro mediante id
            $('.target').show(); //muestro mediante clase
 
Target = id o class de la img
         });
 

Solo es pasalo en vez de un on click por un Hover, probadlo y nos comentais

[g3kdigital]

El error es porque quieres apuntar al elemento hermano, al colocarlos así:

.boton:hover .imagen

Estas apuntando a un elemento hijo de boton. Lo correcto sería así:

.boton:hover + .imagen o .btn:hover ~ .imagen

[IsaBelM]

Exacto, has de usar los selectores de hermanos adyacente https://developer.mozilla.org/es/doc...nos_adyacentes