Onmouseover y Rollover texto e Imagenes.

[navaslord]

Hola Saludos,

Me gustaria saber como como hacer esto:

tengo una imagen con texto que dice "hoteles" de color negro y otra igual "hoteles"pero Amarilla como haria el efecto rollover y que demas aun lado me muestre una imagen de un Hotel. todo esto solo al pasar el mouse por encima . Gracias.

y que cambie a amarillo y muestre la imagen al pasar el mouse
Hotel

[jomaruro]

Hola:

Prueba con la pseudoclase hover.

Saludos.

[navaslord]

En este caso como seria??

[kseso?]

las dos cosas con :hover como ya le indicó Jomaruro
Pero eso ya estaba dicho, si participo es para ampliar:
y el hotel en span oculto mostrado al :hover

[navaslord]

Me podrian mostrar un codigo de ejemplo?

se los agradeceria !!

[kseso?]

Iniciado por navaslord

Me podrian mostrar un codigo de ejemplo?

se los agradeceria !!

Pues no, no tengo a mano nada creado que pasarle.

Pero no tengo ninguna duda sobre que no le llevará más de 5 minutos encontrar alguno con ayuda de s. google.

Un buen sitio para comenzar la búsqueda puede que sea http://www.cssplay.co.uk/

[braulito]

El ejemplo:

Código CSS:

.rollover {
            display: block;
            width: 306px;
            height: 350px;
            background: url(http://quehotelreservo.es/files/2009/07/gran-hotel-almeria-exterior.jpg) no-repeat;
        }
        
        .rollover:hover {
            background: url(laotraimagen.jpg) no-repeat;
        }
        
        .rollover span {
            display: none;
        }
 

Código HTML:

<a href="#" class="rollover"><span>Hotel</span></a>
 

Otra solución es que juntes las dos imágenes y que en el :hover sólo hagas un cambio en la propiedad background-position.

Espero te sirva de ayuda.

[navaslord]

Iniciado por braulito

El ejemplo:

Código CSS:

.rollover {
            display: block;
            width: 306px;
            height: 350px;
            background: url(http://quehotelreservo.es/files/2009/07/gran-hotel-almeria-exterior.jpg) no-repeat;
        }
        
        .rollover:hover {
            background: url(laotraimagen.jpg) no-repeat;
        }
        
        .rollover span {
            display: none;
        }
 

Código HTML:

<a href="#" class="rollover"><span>Hotel</span></a>
 

Otra solución es que juntes las dos imágenes y que en el :hover sólo hagas un cambio en la propiedad background-position.

Espero te sirva de ayuda.

Hola muchas gracias,

mira el que me pusiste desaparece la imagen al pasar el mouse, y lo que necesito es que aparesca una imagen al pasar el mouse por sierto item ya sea texto o un link pero no que aparesca encima que me tape si no aun costado.

la idea es hacer un menu de sectores de comercio y que al pasar el mouse por un sector me muestre una imagen alusiva!