Hola,

El jue, 16-08-2007 a las 13:48 -0500, final20 escribió:
> 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:

Sólo un pequeño apunte, aún veo más de una vez que la gente sigue usando
javascript "a la antigua" sin usar ningún framework tipo JQuery.

Vale que a veces si sólo lo queremos para una cosa puede ser incrementar
de forma tonta el tamaño de la web (aunque JQuery sólo ocupa un 20k's)
pero lo hace todo mucho más fácil.

Por ejemplo:

  $(document).ready(function () {       
        $('#table_results tr').hover(
                function(){
                        $(this).addClass("img_hover");
                },
                function(){
                        $(this).removeClass("img_hover");
                }
        );
  });

Es tan fácil que creo que no hace falta ni explicarlo. Y todo totalmente
no intrusivo, y que en principio funciona igual en todos los navegadores
(en todos realmente no, en casi todos los que se usan actualmente)


> 
> 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
-- 
Carlos Rincón
www.neuroticweb.com
www.neuroticweb.com/blog

_______________________________________________
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

Responder a