Foros del Web » Creando para Internet » CSS »

Cambiar una zona al pasar el raton

Estas en el tema de Cambiar una zona al pasar el raton en el foro de CSS en Foros del Web. Hola a todos, @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original #uno #n { background : url ( ../images/0iz.png ) no-repeat ; padding-bottom : 5px ; padding-left ...
  #1 (permalink)  
Antiguo 11/08/2011, 05:35
Avatar de dmm84  
Fecha de Ingreso: marzo-2011
Mensajes: 164
Antigüedad: 6 años
Puntos: 13
Cambiar una zona al pasar el raton

Hola a todos,

Código CSS:
Ver original
  1. #uno #n { background:url(../images/0iz.png) no-repeat; padding-bottom:5px; padding-left:10px;}
  2. #dos #n { background:url(../images/0de.png) no-repeat; padding-bottom:5px; padding-left:10px;}
  3.  
  4. #uno #n:hover { background:url(../images/1iz.png) no-repeat; padding-bottom:5px; padding-left:10px;}
  5. #dos #n:hover { background:url(../images/1de.png) no-repeat; padding-bottom:5px; padding-left:10px;}

Código HTML:
Ver original
  1. <a href="#" id="uno"><span id="n"></span></a>
  2. <a href="#" id="dos"><span id="n"></span></a>

Bueno, el caso es que lo que yo quiero conseguir es que al pasar el raton por #dos se tiene que cambiar tambien #uno. Es decir, si solo paso el raton por #uno pues solo #uno se cambia pero si paso el raton por #dos, entonces #uno y #dos se tienen que cambiar. A ver si alguien me pudiera ayudar con esto.
__________________
Mas vale un codigo que mil palabras
  #2 (permalink)  
Antiguo 11/08/2011, 06:26
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 6 meses
Puntos: 63
Respuesta: Cambiar una zona al pasar el raton

Con CSS no.
Con Javascript y la propiedad onmousever puedes logar esos efectos.

Saludos
  #3 (permalink)  
Antiguo 11/08/2011, 06:27
Avatar de dmm84  
Fecha de Ingreso: marzo-2011
Mensajes: 164
Antigüedad: 6 años
Puntos: 13
Respuesta: Cambiar una zona al pasar el raton

y como seria un ejemplo sencillo de eso?
__________________
Mas vale un codigo que mil palabras
  #4 (permalink)  
Antiguo 11/08/2011, 06:44
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 6 meses
Puntos: 63
Respuesta: Cambiar una zona al pasar el raton

Vale, pero uno sencillo solo

El HTML
Código HTML:
Ver original
  1. <a href="#" id="uno" style="color: blue;" onmouseover="uno()" onmouseout="unoSoltar()">Primer enlace</a>
  2.     <a href="#" id="dos" style="color: blue;" onmouseover="dos()" onmouseout="dosSoltar()">Segundo enlace</a>

Invocas los eventos onmouseover(al poner el cursor encima) y onmouseout(al quitar el cursor)



Javascript
Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. function uno(){
  3.     document.getElementById('dos').style.color = "red";
  4.     }
  5.  
  6. function dos(){
  7.     document.getElementById('uno').style.color = "red";
  8.     }
  9.    
  10. function unoSoltar(){
  11.     document.getElementById('dos').style.color = "blue";
  12.     }
  13.    
  14. function dosSoltar(){
  15.     document.getElementById('uno').style.color = "blue";
  16.     }
  17. </script>

Creamos cuatro funciones, las dos primeras harás que el estilo del enlace cambie, y los dos siguiente serán las que los devuelvan a su estilo original.


Saludos
  #5 (permalink)  
Antiguo 11/08/2011, 06:53
Avatar de dmm84  
Fecha de Ingreso: marzo-2011
Mensajes: 164
Antigüedad: 6 años
Puntos: 13
Respuesta: Cambiar una zona al pasar el raton

ok, gracias por todo, solo una ultima cosa y ya no te molesto mas:

si quiero que lo que cambie es el background como en el CSS tengo que usar esto:

Código Javascript:
Ver original
  1. document.getElementById('uno').style.background = "url(../images/1de.png) no-repeat";
__________________
Mas vale un codigo que mil palabras
  #6 (permalink)  
Antiguo 11/08/2011, 06:58
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 6 meses
Puntos: 63
Respuesta: Cambiar una zona al pasar el raton

No hombre, no me molestas, puedes preguntar todo lo que quieras, pero vamos estos son atributos para los id de los elementos, es como CSS

En tu caso el que me pediste seria backgroundImage. Como vez no cambia mucho de CSS backgground-image, solo quita el "-" y la I en mayuscula.

En el padding-left por ejemplo seria paddingLeft.

Espero haberme explicado bien y lo hayas entendido y sino pues "google".

Saludos
  #7 (permalink)  
Antiguo 11/08/2011, 06:59
Avatar de dmm84  
Fecha de Ingreso: marzo-2011
Mensajes: 164
Antigüedad: 6 años
Puntos: 13
Respuesta: Cambiar una zona al pasar el raton

ok, ya se mas o menos lo que tengo que ir buscando para conseguir el resultado que quiero :)
__________________
Mas vale un codigo que mil palabras
  #8 (permalink)  
Antiguo 11/08/2011, 16:07
Avatar de dmm84  
Fecha de Ingreso: marzo-2011
Mensajes: 164
Antigüedad: 6 años
Puntos: 13
Respuesta: Cambiar una zona al pasar el raton

al final lo e solucionado sin javascript:

Código HTML:
Ver original
  1. <span id="uno">
  2. <a href="#" id="primero"></a>
  3. <span id="dos">
  4. <a href="#" id="segundo"></a>
  5. <span id="tres">
  6. <a href="#" id="tercero"></a>
  7. </span></span></span>

Código CSS:
Ver original
  1. #primero,
  2. #segundo,
  3. #tercero { background:url(fotoA.jpg) no-repeat; padding-bottom:5px; padding-left:10px;}
  4.  
  5. #uno:hover #primero { background:url(fotoB.jpg) no-repeat; padding-bottom:5px; padding-left:10px;}
  6. #dos:hover #segundo { background:url(fotoB.jpg) no-repeat; padding-bottom:5px; padding-left:20px;}
  7. #tres:hover #tercero { background:url(fotoB.jpg) no-repeat; padding-bottom:5px; padding-left:10px;}

Solo hay que ser persistente hasta que las cosas salgan :)
__________________
Mas vale un codigo que mil palabras

Etiquetas: pasar, raton
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:41.