Pues yo lo que te recomiendo es que lo hagas usando javascript para que
funcione en IE6 ya que para IE la pseudo clase hover solo existe en los
vínculos "<a>" quedaría de esta manera:
EL CSS:
<style type="text/css">
#IMGHover { /*Identificador de la capa que hace el hover */
width: 200px;/*Especifico el tamaño del div para que no se pase de
las dimenciones visibles de la imagen en este caso 200x200px*/
height: 200px;
background-image: url(bg.jpg);/*Ponemos la imagen que se puede ver
abajo */
background-position: top;/* especificamos la posicion de la imagen
del fondo */
background-repeat:no-repeat;/* por si las dudas le decimos ke no
repita el fondo */
}
#IMGHover:hover, #IMGHover.over {/* aqui esta la magia ponemos la pseudo
clase :hover para mozilla IE7 y le ponemos la clase over para IE esta
sera reemplazada por DOM con javascript */
background-position: bottom; /* esto es lo que hace que la imagen
cambie en este caso solo cambiamos la posicion de la imagen para que se
vea la parte de abajo*/
}
</style>
EL JavaScript:
// JavaScript Document
startList = function() {// modifique el script de suckerfish para que
funcione con esta div ^^
if(document.all&&document.getElementById){// checamos que se trate de IE
overDiv = document.getElementById("IMGHover"); //Obtenemos la
div ^^
overDiv.onmouseover = function() {//cuando pasen el mouse sobre
la div...
this.className +=" over";//le agregamos una clase en este
caso over que es la que especificamos en css
}
overDiv.onmouseout = function() {//cuando el mouse salga de la
div...
this.className = this.className.replace(" over","");//le
quitamos la clase ^^
}
}
}
window.onload=startList;//cuando la cargue la pagina ^^ ejecutar la
funcion xD
El HTML:
<div id="IMGHover"></div>
y pues bueno para que veas como funciona lo colgué en geocities Jeje
allí puedes ver el código fuente para entender mejor su funcionamiento
ya lo probe en IE6 y pues no deveria dar problemas aunque pues no
aseguro nada ya ke mi IE6 es emulado ^^
http://mx.geocities.com/nma2040/divOver/div.html
Espero te sea de utilidad ^^ Saludos!!!
LISTAS escribió:
> Funciona en Explorer, pero no en Firefox... y necesito que lo haga en por lo
> menos estos 2... :(
> ¿A ti te funciona en ambos?
>
> Si es así, pásame el enlace a tu calendario y lo miro. Gracias.
>
> A.V.W.
>
> ----- Original Message -----
> From: "Jazmin Azucena Nieto Garduño" <[EMAIL PROTECTED]>
> To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org>
> Sent: Wednesday, August 15, 2007 3:26 PM
> Subject: Re: [Ovillo] comportamiento hover
>
> Hola buenas tardes :)
>
> yo tengo una que estoy usando en un calendario, te envio mi codigo, espero
> que te sirva
>
> y es class
>
> ( today, es como doy de alta en mi tabla la imagen (cuando cargas la
> pagina))
>
> .today {
> FONT-WEIGHT: bold;
> TEXT-ALIGN:center;
> BACKGROUND-IMAGE: url(cuadc.gif);
> COLOR: #000000;
> border-bottom: 0px;
> height:20px;
> }
>
> TD.today A {
> FONT-WEIGHT: bold;
> TEXT-ALIGN:center;
> COLOR: 666666;
> height:20px;
>
> }
>
> (esta es la imagen que se ve cuando pones el link, en mi caso yo tengo la
> misma que en un principio)
>
> TD.today A:link {
> FONT-WEIGHT: bold;
> TEXT-ALIGN:center;
> BACKGROUND-IMAGE: url(cuadc.gif);
> COLOR: #666666;
> height:20px;
> }
>
> (Aqui esta el meollo del asunto)(pones la misma imagen que en un principio
> porque quiero que aunque ya hayan entrado en el link se siga viendo igual)
>
> TD.today A:visited {
> FONT-WEIGHT: bold;
> TEXT-ALIGN:center;
> BACKGROUND-IMAGE: url(cuadc.gif);
> COLOR: #660033;
> height:20px;
> }
>
> (esta imagen se ve cuando pones el puntero sobre el link)en esta caso tengo
> otra)
>
> TD.today A:hover {
> FONT-WEIGHT: bold;
> TEXT-ALIGN:center;
> BACKGROUND-IMAGE: url(cuadclnk.gif);
> COLOR: #FFFFFF;
> height:20px;
> }
>
> bueno :), espero que te sirva. (es parte del codigo de un calendario que
> tengo)
> bye me dices si te sirvio)
>
>
>> ----- Original Message -----
>> From: LISTAS <[EMAIL PROTECTED]>
>> To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org>
>> Subject: Re: [Ovillo] comportamiento hover
>> Date: Tue, 14 Aug 2007 18:32:47 -0300
>>
>>
>> OK, funciona con ID, pero no entiendo porqué con CLASS no funciona. Yo
>> había
>> hecho todo "tal cual el ejemplo" sugerido pero con CLASS.
>>
>> ¿Alguien sabe por qué con uno sí y con el otro no?
>>
>> Con Explorer lo resolví anidando un Anchor entre dos DIV... pero me
>> desapareció la manito del enlace, aunque enlaza perfectamente... (!!) De
>> modo que hice una truca exclusiva para el cursor con Explorer y todo quedó
>> a
>> pedir de boca.
>>
>> De todos modos, es un bodrio que no se resuelva con una simple clase ya
>> que
>> hay que encadenar tantos estilos como recursos haya (#enlace1, #enlace2,
>> #enlace3, etc. + (#enlace1:hover, #enlace2:hover, #enlace3:hover, etc. ).
>>
>> En fin, gracias por todo.
>>
>> A.V.W.
>>
>> ----- Original Message -----
>> From: "Almorca" <[EMAIL PROTECTED]>
>> To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org>
>> Sent: Tuesday, August 14, 2007 9:17 AM
>> Subject: Re: [Ovillo] comportamiento hover
>>
>>
>> Pues con hover como muy bien has puesto en el título.
>>
>> Prueba con
>>
>> #id {
>> background: transparent url(imagen1.png) no-repeat;
>> }
>> #id:hover {
>> background: transparent url(imagen2.png) no-repeat;
>> }
>>
>> El problema es que IE sólo te deja usar hover con enlaces por lo que
>> tendrás
>> que usar algún hack para IE. Prueba con la librería
>> IE7.<http://dean.edwards.name/IE7/>
>>
>> El día 14/08/07, LISTAS <[EMAIL PROTECTED]> escribió:
>>
>>> Un problema: tengo un div que como fondo tiene una imagen y quiero que
>>> al
>>> poner el cursor sobre el mismo me cambie la imagen y al salir me
>>> devuelva
>>> la
>>> original. ¿Cómo se hace eso con CSS?
>>>
>>> _______________________________________________
>>> Lista de distribución Ovillo
>>> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
>>> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
>>> http://lists.ovillo.org/mailman/listinfo/ovillo
>>>
>>>
>>
>> --
>> We don't need no education - Pink Floyd
>> _______________________________________________
>> Lista de distribución Ovillo
>> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
>> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
>> http://lists.ovillo.org/mailman/listinfo/ovillo
>>
>> _______________________________________________
>> Lista de distribución Ovillo
>> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
>> Puedes modificar tus datos o desuscribirte en la siguiente
>> dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
>>
>
>
>
>
>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
