Aplicar estilo de un div haciendo hover en otro

morfasto · #1 (**permalink**) 07/12/2011, 19:06

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!

jluisfg · #2 (**permalink**) 07/12/2011, 19:14

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!

IsaBelM · #3 (**permalink**) 07/12/2011, 20:33

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>

morfasto · #4 (**permalink**) 09/12/2011, 12:54

Y como lo puedo hacer con Jquery?

IsaBelM · #5 (**permalink**) 09/12/2011, 13:45

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??

morfasto · #6 (**permalink**) 09/12/2011, 13:59

Lo que pasa es que no logro hacer que funcione.

Por ejemplo:
HTML

Código HTML:

Ver original<div id="header">
<div id="imagen_usuario"><img src="imagen.jpg"></div>
<div id="nombre_apellido_usuario">Rodrigo Perez</div>
</div>

ESTILO

Código CSS:

Ver original#header{
position:absolute;
width:100px;
height:auto;
left:0px;
top:0px;
}
#imagen_usuario{
position:relative;
left:0px;
width:50px;
height:50px;
}
#nombre_apellido_usuario{
position:relative;
right:0px;
width:50px;
height:50px;
background:blue;
}
#nombre_apellido_usuario:hover{
background:red;
}

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?

IsaBelM · #7 (**permalink**) 09/12/2011, 15:22

veo que no leíste o no has sabido interpretar la respuesta que te di en el post #3

kseso? · #8 (**permalink**) 09/12/2011, 15:24

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<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Kseso? jugando con css</title>
<style type="text/css">
* {
  margin:0; padding:0; position: relative;
}
#container {
  width: 600px;
  height: 400px;
  margin: 0 auto;
}
#izquierda, #derecha {
  width:50%;
  height: 100%;
  float: left;
}
#izquierda {
  background: red;
}
#derecha {
  background: blue;
}
#container:hover #izquierda {background: green;}
#izquierda:hover {background: red!important;}
#izquierda:hover ~ div {background: green;}
</style>    
</head>
<body>
<div id="container">
    <div id="izquierda">Caja Izquierda</div>
    <div id="derecha">Caja derecha</div>
</div>
</body>
</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!

IsaBelM · #9 (**permalink**) 09/12/2011, 15:38

Cita:

Iniciado por kseso?

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

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

kseso? · #10 (**permalink**) 09/12/2011, 15:56

Comentario editado por mi. Demasiado mal redactado y nada comprensible por haberlo escrito desde un móvil.
Corregido y ampliado en #12

cristian_cena · #11 (**permalink**) 09/12/2011, 16:30

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.

kseso? · #12 (**permalink**) 09/12/2011, 21:56

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.