Foros del Web » Creando para Internet » CSS »

Ayuda con rollover con CSS

Estas en el tema de Ayuda con rollover con CSS en el foro de CSS en Foros del Web. 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; ...
  #1 (permalink)  
Antiguo 09/03/2006, 07:19
 
Fecha de Ingreso: enero-2005
Mensajes: 150
Antigüedad: 19 años, 2 meses
Puntos: 1
Ayuda con rollover con CSS

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.
  #2 (permalink)  
Antiguo 09/03/2006, 09:37
Avatar de Hereje  
Fecha de Ingreso: junio-2002
Ubicación: Córdoba, Argentina
Mensajes: 439
Antigüedad: 21 años, 9 meses
Puntos: 2
Tal como dices, no es posible, hasta donde yo sé. Con una pequeña función Javascript lograrias el efecto.

Saludos!
__________________
Sergio
  #3 (permalink)  
Antiguo 09/03/2006, 18:22
 
Fecha de Ingreso: enero-2005
Mensajes: 150
Antigüedad: 19 años, 2 meses
Puntos: 1
Vaya, me lo imaginaba. Si, con javascript se hacerlo pero quería remediarlo jeje. Muchas gracias de todas formas.
  #4 (permalink)  
Antiguo 10/03/2006, 07:12
 
Fecha de Ingreso: octubre-2005
Mensajes: 19
Antigüedad: 18 años, 5 meses
Puntos: 0
Claro Java muchas veces ayuda pero no es soportado por algunos navegadores
  #5 (permalink)  
Antiguo 10/03/2006, 14:19
Avatar de Hereje  
Fecha de Ingreso: junio-2002
Ubicación: Córdoba, Argentina
Mensajes: 439
Antigüedad: 21 años, 9 meses
Puntos: 2
¿Por qué navegador no es soportado JavaScript?
__________________
Sergio
  #6 (permalink)  
Antiguo 10/03/2006, 15:04
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 18 años, 5 meses
Puntos: 1
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.
  #7 (permalink)  
Antiguo 11/03/2006, 20:58
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 576
Antigüedad: 19 años, 6 meses
Puntos: 4
Hola a todos

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,
__________________
_______
Jorge Rojas.
  #8 (permalink)  
Antiguo 14/03/2006, 15:50
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 18 años, 5 meses
Puntos: 1
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> 

Última edición por Jorolo; 18/03/2006 a las 10:29
  #9 (permalink)  
Antiguo 15/03/2006, 13:23
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 18 años, 5 meses
Puntos: 1
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
  #10 (permalink)  
Antiguo 15/03/2006, 16:52
 
Fecha de Ingreso: enero-2005
Mensajes: 150
Antigüedad: 19 años, 2 meses
Puntos: 1
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
  #11 (permalink)  
Antiguo 17/03/2006, 22:20
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.936
Antigüedad: 21 años
Puntos: 65
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
  #12 (permalink)  
Antiguo 18/03/2006, 05:26
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 18 años, 5 meses
Puntos: 1
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.
  #13 (permalink)  
Antiguo 18/03/2006, 08:46
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.936
Antigüedad: 21 años
Puntos: 65
Ok Jorolo, gracias por la explicación

Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:15.