Ayuda con rollover con CSS

roylugones · #1 (**permalink**) 09/03/2006, 07:19

Código:

<style type="text/css">
<!--
  #uno{
    position:absolute;
	top:20px;
	left:20px;
	width:100px;
	height:50px;
    margin:1px solid #000;
	background:#FF0000;
  }
  #dos{
    position:absolute;
	top:80px;
	left:20px;
	width:100px;
	height:50px;
    margin:1px solid #000;
	background:#0000FF;
  }
  #tres{
    position:absolute;
	top:15px;
	left:200px;
	width:300px;
	height:120px;
    margin:1px solid #000;
	background:#0000FF;
	overflow: hidden;
    display: block; 
  }
  #tres:hover{
	background:#FF0000;
  }
  .invisible{
  display:none;
  
  }
  
-->
</style>

Código:

<body>
  <div id="uno">
  </div>
  <div id="dos">
  </div>
  <div id="grande">
    <a href="#" id="tres"><span class="invisible">texto invisible</span></a>
  </div>
</body>

Ahí les he pegado los estilos y el body. Como ven les puse un ejemplo de lo más sencillo para que se pueda entender bien y puedan solucionar mi duda.

Es la siguiente: como pueden ver al pasar el raton por el ID="tres" me cambia de color como es normal. Bien. Pues lo que yo quiero saber es como tendría que hacer en CSS (si es que se puede) para que al pasar el ratón por ID="uno" o ID="dos" me cambie el color automáticamente del ID="tres". ¿Me entienden?

Quizá con CSS no se puede, pero que bien me vendría.

Un saludo y gracias.

Hereje · #2 (**permalink**) 09/03/2006, 09:37

Tal como dices, no es posible, hasta donde yo sé. Con una pequeña función Javascript lograrias el efecto.

Saludos!

roylugones · #3 (**permalink**) 09/03/2006, 18:22

Vaya, me lo imaginaba. Si, con javascript se hacerlo pero quería remediarlo jeje. Muchas gracias de todas formas.

denishespinoza · #4 (**permalink**) 10/03/2006, 07:12

Claro Java muchas veces ayuda pero no es soportado por algunos navegadores

Hereje · #5 (**permalink**) 10/03/2006, 14:19

¿Por qué navegador no es soportado JavaScript?

Jorolo · #6 (**permalink**) 10/03/2006, 15:04

Hola a todos.

Hola roylugones.

Sí que se pueden hacer cosas como la que indicas, pero no funcionará en todos los navegadores (de momento)

http://www.forosdelweb.com/f4/enviar-capas-atras-adelante-375006/
http://www.forosdelweb.com/showthrea...44#post1442244

Por una vez y sin que sirva de precedente me citaré a mí mismo:
http://developer.mozilla.org/es/docs/CSS_din%C3%A1mico
Es solo una introducción al tema.

Sobre javascript (no confundir con java) Los navegadores suelen soportalo, pero tambien suelen ofrecer la opcion de desactivarlo.
No es un navegador pero merece ser comentado. Google no soporta javascript.

iconogt · #7 (**permalink**) 11/03/2006, 20:58

Les comento... Yó he logrado hacer tal cosa con unas cuatas declaraciones de CSS, se trata de usar los vìnculos + padding, algo así:

Código:

/*capa contenedora*/
#capa a { 
background-image : url(imagen1.gif);
background-position : top center;
background-repeat : no-repeat;
color : #ffffff;
margin : 0;
padding : ?; /*Aquí es donde se busca el efecto*/
}

#capa a:hover { 
background-image : url(imagen2.gif);
background-position : top center;
background-repeat : no-repeat;
color : #ffffff;
margin : 0;
padding : ?; /*Aquí es donde se busca el efecto*/
}

Es sólo un ejemplo rápido, pero si funciona en todos los navegadores, bueno... Yo lo he probado y funca.

Espero comentarios.

Slds,

Jorolo · #8 (**permalink**) 14/03/2006, 15:50

Hola a todos.

Hola roylugones.

Tienes que disculparme, hiciste una pregunta clara y directa,

Cita:

lo que yo quiero saber es como tendría que hacer en CSS (si es que se puede) para que al pasar el ratón por ID="uno" o ID="dos" me cambie el color automáticamente del ID="tres". ¿Me entienden?

no la entendí. Mis comentarios y ejemplos no eran los apropiados. Lo siento. Mis ejemplos eran una buena muestra de como relacionar elementos, pero en los ejemplos solo hay relaciones padre -> descendiente. Me parecen las más comodas y versatiles.

Pero tu consulta era como relacionar hermanos, al posicionarte en id='uno' cambiar las propiedades de un descendiente de id='grande'. Tambien se puede, pero el sistema es menos versatil

Creo que esto es exactamente lo que pedias:

Código HTML:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> <!-- correjido gracias a kahlito ☺ -->
<head>
<meta http-equiv='Content-Type' content='text/xml; charset=UTF-8'/> 
<title>relacionando hermanos</title> 
<style type="text/css"> 

div#uno:hover + div + div #tres { color: red; }

</style> </head>
<body>
  <div id="uno">div id="uno" div id="uno" div id="uno" div id="uno"  </div>
 
  <div id="dos">div id="dos" div id="dos" div id="dos" div id="dos" </div>
 
  <div id="grande">div id="grande" div id="grande" div id="grande"
  		<a href="#" id="tres">Enlace id='tres' <span>com span dentro</span> </a> 
                <a href="#">Enlace sin id  <span>com span dentro</span> </a></div>
 </body> </html>

Jorolo · #9 (**permalink**) 15/03/2006, 13:23

Hola a todos.

Siempre suele haber más de una manera de hacer las cosas:

Cita:

#uno:hover + #dos + #grande #tres { color: red; }

Para no perder la costumbre aquí teneis el tradicional enlace

roylugones · #10 (**permalink**) 15/03/2006, 16:52

Muchísimas gracias Jorolo. Ahora si que acertaste en la diana.

Muchas gracias de verdad, me has sido de mucha ayuda.

;) Este foro es de lo mejor jeje

kahlito · #11 (**permalink**) 17/03/2006, 22:20

Cita:

Iniciado por Jorolo

Creo que esto es exactamente lo que pedias:

Código HTML:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sp" lang="sp">
<head>
<meta http-equiv='Content-Type' content='text/xml; charset=UTF-8'/> 
<title>relacionando hermanos</title> 
<style type="text/css"> 

div#uno:hover + div + div #tres { color: red; }

</style> </head>
<body>
  <div id="uno">div id="uno" div id="uno" div id="uno" div id="uno"  </div>
 
  <div id="dos">div id="dos" div id="dos" div id="dos" div id="dos" </div>
 
  <div id="grande">div id="grande" div id="grande" div id="grande"
  		<a href="#" id="tres">Enlace id='tres' <span>com span dentro</span> </a> 
                <a href="#">Enlace sin id  <span>com span dentro</span> </a></div>
 </body> </html>

Hola Jorolo he intentado probar tu ejemplo y la verdad no me funciona, tambien he visto un pequeño detalle:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sp" lang="sp">

No seria así?

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

La verdad es que pregunto ya que hasta ahora solia utilizar "es" guiándome por ejemplo de aquí:

http://www.gnu.org/software/gettext/...ettext_15.html
http://www.gnu.org/software/gettext/...ettext_16.html

¿Al ser codificado como "charset=UTF-8" es diferente?, la verdad es que aún estoy empezando a hacer pruebas con este último (UTF-8), de ahí mi cuestión

Saludosss

Jorolo · #12 (**permalink**) 18/03/2006, 05:26

Hola a todos. hola Kahlito.

Tienes razón, el código de idioma está mal. En la mayoría de los ejemplos que publico encontrarás errores, esto es así por que he detectado entre los foristas la tendencia a no comentar mi código. Los errores son un 'truco' para incitar a la gente ha hacer lo que tú has hecho. Ya sabes lo que dicen: "... que hablen de ti, aunque sea mal."

En realidad este error no es mio, es una errata en la traducción de la especificación del estándar xhtml 1.0

http://www.sidar.org/recur/desdi/tra...11.htm#docconf

En relación a tu consulta:

Cita:

¿Al ser codificado como "charset=UTF-8" es diferente?

No, son cosas independientes, no hay relación. Los códigos de idioma estám definidos en ISO 639:
http://xml.coverpages.org/iso639a.html

Esto es valido tanto para html como para xhtml. Hablando de validez, este error tiene la peculiaridad de que valida.

Moraleja:
Si copias código copiarás errores.
Confiar ciegamente en una pieza de software es un error que genera errores.

kahlito · #13 (**permalink**) 18/03/2006, 08:46

Ok Jorolo, gracias por la explicación