Foros del Web » Creando para Internet » CSS »

Aplicar estilo de un div haciendo hover en otro

Estas en el tema de Aplicar estilo de un div haciendo hover en otro en el foro de CSS en Foros del Web. Hola, que tal? Estoy tratando de buscar la manera para hacer que cuando haga hover en un div, se aplique la propiedad de hover de ...
  #1 (permalink)  
Antiguo 07/12/2011, 19:06
Avatar de morfasto  
Fecha de Ingreso: julio-2011
Ubicación: Lima
Mensajes: 291
Antigüedad: 10 años, 11 meses
Puntos: 8
Aplicar estilo de un div haciendo hover en otro

Hola, que tal?

Estoy tratando de buscar la manera para hacer que cuando haga hover en un div, se aplique la propiedad de hover de otro div.

Alguien tiene alguna idea?

Muchas gracias!
  #2 (permalink)  
Antiguo 07/12/2011, 19:14
 
Fecha de Ingreso: abril-2011
Ubicación: Distrito Federal
Mensajes: 83
Antigüedad: 11 años, 2 meses
Puntos: 9
Respuesta: Aplicar estilo de un div haciendo hover en otro

puedes aplicar el mismo CSS a los dos, pero no creo que sea lo que estas buscando. Lo más conveniente sería utilizar JQuery.

Saludos!
  #3 (permalink)  
Antiguo 07/12/2011, 20:33
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 14 años
Puntos: 1011
Respuesta: Aplicar estilo de un div haciendo hover en otro

no me queda claro que es lo que pretendes.

si el bloque sobre el que se aplicar :hover está en árbol antes que el otro si es posible. se trata de usar el selector de adyacente. también te puede interesar el selector de general de hermano
Cita:
div1:hover + div2 {
......
}

<div id="div1"></div>
<div id="div2"></div>
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #4 (permalink)  
Antiguo 09/12/2011, 12:54
Avatar de morfasto  
Fecha de Ingreso: julio-2011
Ubicación: Lima
Mensajes: 291
Antigüedad: 10 años, 11 meses
Puntos: 8
Respuesta: Aplicar estilo de un div haciendo hover en otro

Y como lo puedo hacer con Jquery?
  #5 (permalink)  
Antiguo 09/12/2011, 13:45
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 14 años
Puntos: 1011
Respuesta: Aplicar estilo de un div haciendo hover en otro

que interesante. cómo pasas de algo que probablemente se puede hacer con css, teniendo este sus limitaciones, a pretender hacerlo con jquery?? sabes que es tan siquiera jquery??
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #6 (permalink)  
Antiguo 09/12/2011, 13:59
Avatar de morfasto  
Fecha de Ingreso: julio-2011
Ubicación: Lima
Mensajes: 291
Antigüedad: 10 años, 11 meses
Puntos: 8
Respuesta: Aplicar estilo de un div haciendo hover en otro

Lo que pasa es que no logro hacer que funcione.

Por ejemplo:
HTML
Código HTML:
Ver original
  1. <div id="header">
  2. <div id="imagen_usuario"><img src="imagen.jpg"></div>
  3. <div id="nombre_apellido_usuario">Rodrigo Perez</div>
  4. </div>

ESTILO
Código CSS:
Ver original
  1. #header{
  2. position:absolute;
  3. width:100px;
  4. height:auto;
  5. left:0px;
  6. top:0px;
  7. }
  8. #imagen_usuario{
  9. position:relative;
  10. left:0px;
  11. width:50px;
  12. height:50px;
  13. }
  14. #nombre_apellido_usuario{
  15. position:relative;
  16. right:0px;
  17. width:50px;
  18. height:50px;
  19. background:blue;
  20. }
  21. #nombre_apellido_usuario:hover{
  22. background:red;
  23. }

Como hago para que cuando se tenga el punter del mouse encima del div #imagen_usuario, el div #nombre_apellido_usuario aplique su propiedad de hover?
  #7 (permalink)  
Antiguo 09/12/2011, 15:22
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 14 años
Puntos: 1011
Respuesta: Aplicar estilo de un div haciendo hover en otro

veo que no leíste o no has sabido interpretar la respuesta que te di en el post #3
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Última edición por IsaBelM; 09/12/2011 a las 15:33
  #8 (permalink)  
Antiguo 09/12/2011, 15:24
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 15 años
Puntos: 539
Respuesta: Aplicar estilo de un div haciendo hover en otro

Como curiosidad (plenamente funcional*) sí se puede lograr con css el cambiar una propiedades de una caja al hover sobre otra hermana, incluido el primero al hacer hover sobre el segundo.

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <meta charset="UTF-8">
  3. <title>Kseso? jugando con css</title>
  4. <style type="text/css">
  5. * {
  6.   margin:0; padding:0; position: relative;
  7. }
  8. #container {
  9.   width: 600px;
  10.   height: 400px;
  11.   margin: 0 auto;
  12. }
  13. #izquierda, #derecha {
  14.   width:50%;
  15.   height: 100%;
  16.   float: left;
  17. }
  18. #izquierda {
  19.   background: red;
  20. }
  21. #derecha {
  22.   background: blue;
  23. }
  24. #container:hover #izquierda {background: green;}
  25. #izquierda:hover {background: red!important;}
  26. #izquierda:hover ~ div {background: green;}
  27. </style>   
  28. </head>
  29. <div id="container">
  30.     <div id="izquierda">Caja Izquierda</div>
  31.     <div id="derecha">Caja derecha</div>
  32. </div>
  33. </body>
  34. </html>

No, no es que estén operativos selectores de precursores en el dom. Sólo es una declaración para que lo aparente.

* plenamente funcional= a estas alturas, quien use ie6, ¡allá penitas!
  #9 (permalink)  
Antiguo 09/12/2011, 15:38
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 14 años
Puntos: 1011
Respuesta: Aplicar estilo de un div haciendo hover en otro

Cita:
Iniciado por kseso? Ver Mensaje
Como curiosidad (plenamente funcional*) sí se puede lograr con css el cambiar una propiedades de una caja al hover sobre otra hermana, incluido el primero al hacer hover sobre el segundo.
me habré perdido algo??
Cita:
Iniciado por IsaBelM Ver Mensaje
si el bloque sobre el que se aplicar :hover está en árbol antes que el otro, sí es posible. se trata de usar el selector de adyacente. también te puede interesar el selector de general de hermano
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #10 (permalink)  
Antiguo 09/12/2011, 15:56
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 15 años
Puntos: 539
Comentario editado por mi. Demasiado mal redactado y nada comprensible por haberlo escrito desde un móvil.
Corregido y ampliado en #12

Última edición por kseso?; 09/12/2011 a las 22:02
  #11 (permalink)  
Antiguo 09/12/2011, 16:30
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 13 años
Puntos: 269
Respuesta: Aplicar estilo de un div haciendo hover en otro

Como bien te indican, no hace falta que lo hagas con javascript.
Igualmente te comparto un ejemplo, el cual se vale del método hover() de jquery.
Espero te sirva.
Un saludo.
  #12 (permalink)  
Antiguo 09/12/2011, 21:56
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 15 años
Puntos: 539
Respuesta: Aplicar estilo de un div haciendo hover en otro

Como parece que en #8 no fui capaz de explicar de forma suficientemente comprensible para todos la curiosidad a la que me refería, a ver si ahora sí lo logro.

Primero un ejemplo algo más elaborado que el código anterior: http://jsfiddle.net/kseso/fnLJy/ listo para poder verlo en acción sin necesidad de copiar y pegar el código.

La curiosidad consiste en emular un selector de hermanos precedentes (o antecesores al que recibe el :hover) en el dom y así aplicar una serie de propiedades no al que recibe el foco del puntero, que también, sino al resto de todos sus hermanos (incluidos sus contenidos) sin importar que aparezcan antes o después en el html.

La simulación está realizada sin utilizar el selector de hermano adyacente (+) ni el de hermano general (~).

Espero haber sido capaz de explicarme ahora mejor de lo que hice anteriormente.

Última edición por kseso?; 10/12/2011 a las 06:54 Razón: Mejor me centro y preocupo sólo en cuestiones de código. Así no se devirtúa más el foro.

Etiquetas: estilo, haciendo, hover
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 12:29.