Foros del Web » Creando para Internet » CSS »

problemas con :hover

Estas en el tema de problemas con :hover en el foro de CSS en Foros del Web. Hola amigos, Tengo una página con una sola imagen 800x600 (uno.jpg) en un div y superpuesto sobre ella un botón en otro div. Al situarnos ...
  #1 (permalink)  
Antiguo 01/01/2011, 10:01
prozaius
Invitado
 
Mensajes: n/a
Puntos:
Pregunta problemas con :hover

Hola amigos,

Tengo una página con una sola imagen 800x600 (uno.jpg) en un div y superpuesto sobre ella un botón en otro div. Al situarnos sobre el botón cambia la imagen (dos.jpg) así como el botón (:hover) y al retirarnos vuelve a la situación inicial.

Después de haber investigado algo el tema del :hover, sigo sin hallar la solución, pues por lo que he averiguado un div hijo no puede cambiar una propiedad de un div padre. A modo de ejemplo pongo un texto de otro foro:

Lo que no se puede hacer es seleccionar un ascendiente (ej. un padre). Por lo tanto el siquiente ejemplo ni funciona ni debe hacerlo:

<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<style type='text/css'>

em:hover #div { color: red; }

</style>

<h1>Este ejemplo ni funciona ni debe hacerlo.</h1>

<div id='div'>
<em>Este em</em>
no puede cambiar las propiedades de su padre.
</div>


No obstante he probado lo siguiente:

Código html:

<body>
<div id="caja1">
<div id="caja2"></div>
</div>
</body>

Css:

#caja1{
position:absolute;
width:800px;
height:600px;
background-image:url(../imagenes/uno.jpg);
background-repeat:no-repeat;
}
#caja2{
position:relative;
width:131px;
height:32px;
float:right;
top:412px;
right:308px;
background-image:url(../imagenes/boton1.jpg);
background-repeat:no-repeat
}
#caja2:hover{
position:relative;
width:131px;
height:32px;
float:right;
top:412px;
right:308px;
background-image:url(../imagenes/boton2.jpg);
background-repeat:no-repeat
}
#caja2:hover #caja1 {
background-image:url(../imagenes/dos.jpg);
background-repeat:no-repeat
}

Y efectivamente no funciona, al pasar sobre el botón cambia su estado (boton2.jpg) según el :hover pero el background de caja1 se mantiene igual, no cambia a la imagen dos.

A ver si alguien sabe como arreglarlo.

Muchas gracias por adelantado.
  #2 (permalink)  
Antiguo 01/01/2011, 10:58
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 8 años, 1 mes
Puntos: 34
Respuesta: problemas con :hover

Como bien te dijeron en el otro foro, no se puede modificar con :hover las propiedades de otro elemento que no es el seleccionado.

Creo que lo mejor seria hacerlo con javascript.
Código HTML:
Ver original
  1. <div onclick="document.getElementById('imagen').background='...' >
  2. <div id="imagen" >

Entiendes? Un saludo!
  #3 (permalink)  
Antiguo 01/01/2011, 11:35
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: problemas con :hover

Cita:
Iniciado por mariomon17 Ver Mensaje
Como bien te dijeron en el otro foro, no se puede modificar con :hover las propiedades de otro elemento que no es el seleccionado.

Creo que lo mejor seria hacerlo con javascript.
Código HTML:
Ver original
  1. <div onclick="document.getElementById('imagen').background='...' >
  2. <div id="imagen" >

Entiendes? Un saludo!
Pues no lo entiendo, no. Porque en el segundo ejemplo:
Código HTML:
Ver original
  1. <div id="caja1">
  2. <div id="caja2"></div>
  3. </div>
  4. </body>
dijese quien lo dijese que no se puede, miente tanto como quien lo repite.

Css define ademas de los selectores descendientes, los adyacentes, hermanos... sin entrar en los pseudoselectores y los definidos por la especificación 3 de css (nº de elemento, tipo de elemento...). Y ahí está claro que no se trata de modificar un ascendente, sino de hermanos y adyacentes.

Y ya que estamos, en un foro de css dar una respuesta basada en el desconocimiento y en js queda como feo, por lo menos.

prozaius:
http://www.forosdelweb.com/f53/rollo...4/#post3553145
  #4 (permalink)  
Antiguo 01/01/2011, 11:54
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 8 años, 1 mes
Puntos: 34
Respuesta: problemas con :hover

EH! Entonces porque todos los libros y manuales se empeñan en enseñanos lo contrario!

Atonito me he quedado.

Muchas Gracias, y perdon por mi desconocimiento.
  #5 (permalink)  
Antiguo 01/01/2011, 12:18
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: problemas con :hover

Cita:
Iniciado por mariomon17 Ver Mensaje
EH! Entonces porque todos los libros y manuales se empeñan en enseñanos lo contrario!

Atonito me he quedado.

Muchas Gracias, y perdon por mi desconocimiento.
Mariomón:
Supongo que los manuales a los que se refiere, indicarán la imposibilidad de css para actuar sobre los ancestros (padre, abuelos...). Si no fuese así, tírelos a la papelera.
Aquí un artículo interesante al respecto:
Why we don't have a parent selector [ing] por Jonathan Snook, @snookca

Sobre lo que yo le he rectificado es sobre la posibilidad que sí da css de actuar sobre elementos que están a la misma "altura" (adyacentes, hermanos) y sobre los descendientes de éstos últimos.
Basta con usar el selector apropiado a cada caso:
Código CSS:
Ver original
  1. elemento + elemento {}
  2. elemento ~ elemento {}
  3. /*y sus derivados*/
  4. elemento hijo:hover + elemento hijo {}
  5. elemento hijo:active ~ elemento hijo {}
  #6 (permalink)  
Antiguo 01/01/2011, 12:40
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 8 años, 1 mes
Puntos: 34
Respuesta: problemas con :hover

Muchas gracias!
Corro a informarme :D
  #7 (permalink)  
Antiguo 01/01/2011, 12:45
prozaius
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: problemas con :hover

Cita:
Iniciado por kseso? Ver Mensaje
Mariomón:
Supongo que los manuales a los que se refiere, indicarán la imposibilidad de css para actuar sobre los ancestros (padre, abuelos...). Si no fuese así, tírelos a la papelera.
Aquí un artículo interesante al respecto:
[URL="http://snook.ca/archives/html_and_css/css-parent-selectors"]Why we don't have a parent selector[/URL] [ing] por Jonathan Snook, [URL="http://twitter.com/snookca"]@snookca[/URL]

Sobre lo que yo le he rectificado es sobre la posibilidad que sí da css de actuar sobre elementos que están a la misma "altura" (adyacentes, hermanos) y sobre los descendientes de éstos últimos.
Basta con usar el selector apropiado a cada caso:
Código CSS:
Ver original
  1. elemento + elemento {}
  2. elemento ~ elemento {}
  3. /*y sus derivados*/
  4. elemento hijo:hover + elemento hijo {}
  5. elemento hijo:active ~ elemento hijo {}
Muchas gracias por vuestras respuestas y en especial a kseso por indicarme el camino. Sin embargo, y dado que no tengo muchos conocimientos en css, no consigo resolver el problema, a pesar de que he accedido a los enlaces facilitados por kseso y realizadas varias pruebas. Entiendo que tal y como tengo el código caja1 es padre de caja2 y debería cambiar algo para que fuesen hermanos o adyacentes, ¿no es así? pero sinceramente no sé como hacerlo. Agradecería alguna ayudita extra. Saludos
  #8 (permalink)  
Antiguo 01/01/2011, 15:29
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 8 años, 1 mes
Puntos: 34
Respuesta: problemas con :hover

Tengo una duda, la expongo auqui o si quereis creo un nuevo tema pero creo que la solucion te vendra bien cuando los hagas hermanos (cosa que tampoco tengo muy clara que es).

Tengo dos div's.
Código HTML:
Ver original
  1. <div class="uno">UNO</div>
  2. <div class="dos">DOS</div>

Y el codigo CSS es este:
Código CSS:
Ver original
  1. .uno {background:#0FF;
  2. }
  3.  
  4. .dos {background:#FF9
  5. }
  6.  
  7. .dos:hover .uno {background:#66F
  8. }

Al final que esta mal, no se como hacerlo. Quiero que al pasar por encima de .dos, .uno se cambie el color de fondo.
  #9 (permalink)  
Antiguo 02/01/2011, 09:30
prozaius
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: problemas con :hover

Cita:
Iniciado por mariomon17 Ver Mensaje
Tengo una duda, la expongo auqui o si quereis creo un nuevo tema pero creo que la solucion te vendra bien cuando los hagas hermanos (cosa que tampoco tengo muy clara que es).

Tengo dos div's.
Código HTML:
Ver original
  1. <div class="uno">UNO</div>
  2. <div class="dos">DOS</div>

Y el codigo CSS es este:
Código CSS:
Ver original
  1. .uno {background:#0FF;
  2. }
  3.  
  4. .dos {background:#FF9
  5. }
  6.  
  7. .dos:hover .uno {background:#66F
  8. }


Al final que esta mal, no se como hacerlo. Quiero que al pasar por encima de .dos, .uno se cambie el color de fondo.
He de reconocer que gracias a kseso y a mi obstinación estoy aprendiendo un poco más sobre css. He encontrado una solución a lo que propones, aunque haciendo un truquito para que se pueda cumplir la norma de selectores adyacentes, intercambiando las posiciones de los div uno y dos. Funcionar funciona, aunque no sé si habrá alguna manera más elegante.

<html>
<head>
<style type="text/css">
.uno {
background:#FF9;
display:block;
position:absolute;
top:20px;
width:600px
}

.dos {background:#0FF;
display:block;
position:absolute;
width:600px;
top:0px

}

.uno:hover + .dos {background:#66F
}
</style>
</head>

<body>
<div class="uno">DOS</div>
<div class="dos">UNO</div>
</body>
</html>

Saludos.
  #10 (permalink)  
Antiguo 02/01/2011, 09:46
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 8 años, 1 mes
Puntos: 34
Respuesta: problemas con :hover

Si, al final de investigar un poco lo consegui (encima no tengo internet "estable") pero eso es un selector para adyacentes, ¿cual es el selector para hermanos?
  #11 (permalink)  
Antiguo 02/01/2011, 09:58
prozaius
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: problemas con :hover

Cita:
Iniciado por mariomon17 Ver Mensaje
Si, al final de investigar un poco lo consegui (encima no tengo internet "estable") pero eso es un selector para adyacentes, ¿cual es el selector para hermanos?
Hermano o adyacente es lo mismo
  #12 (permalink)  
Antiguo 02/01/2011, 10:11
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 8 años, 1 mes
Puntos: 34
Respuesta: problemas con :hover

Cita:
Iniciado por prozaius Ver Mensaje
Hermano o adyacente es lo mismo
Pero algo no puede ser hermano y no necesariamente adyacente, verdad?

Por ejemplo:
Código HTML:
Ver original
  1. <div class="uno"></div>
  2. <div class="dos"></div>
  3.  
  4. <div class="cinetnido">
  5.    <img><p><p>
  6. </div>
  7.  
  8. <div class="tres"></div>

Aqui dos es adyacente de uno, pero tres no es adyacente y si hermano, o estoy equivocado?

Aqui como se podria hacer para cambiar alguna propiedad de tres. al pasar sobre .uno


Gracias!
  #13 (permalink)  
Antiguo 02/01/2011, 12:46
prozaius
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: problemas con :hover

Cita:
Iniciado por mariomon17 Ver Mensaje
Pero algo no puede ser hermano y no necesariamente adyacente, verdad?

Por ejemplo:
Código HTML:
Ver original
  1. <div class="uno"></div>
  2. <div class="dos"></div>
  3.  
  4. <div class="cinetnido">
  5.   <img><p><p>
  6. </div>
  7.  
  8. <div class="tres"></div>

Aqui dos es adyacente de uno, pero tres no es adyacente y si hermano, o estoy equivocado?

Aqui como se podria hacer para cambiar alguna propiedad de tres. al pasar sobre .uno

Gracias!
En tu ejemplo los div uno,dos,cinetnido y tres son todos adyacentes (o hermanos). Para hacer lo que quieres te pongo un ejemplo:

Código HTML:
<html>
<head>
<style type="text/css">
.uno {background:#0FF;
}
 
.dos {background:#FF9
}

.cinetnido {background:#DDD
}

.tres {background:#CC6
}

.uno:hover + .dos + .cinetnido + .tres {background:#66F}

</style>
</head>

<body>
<div class="uno">UNO</div>
<div class="dos">DOS</div>
<div class="cinetnido">
   <img><p><p>
</div>
<div class="tres">TRES</div>
</body>
</html> 
Lo he probado en cuatro navegadores y curiosamente no me funciona en chrome, pero si en explorer, firefox y opera. ¿Alguien sabe por qué?

No obstante te recomiendo la web de consulta que a su vez nos indicó kseso, donde puedes aclarar muchos conceptos: http://www.librosweb.es/

Un saludo.
  #14 (permalink)  
Antiguo 02/01/2011, 12:57
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: problemas con :hover

Cuando hablaba de hermanos y adyacentes quería hacer distinción, como bien ha dicho alguien, a elementos que estando dentro del mismo contenedor (y a la misma "altura") pueden ser o no consecutivos.

> selector de descendiente, con independencia de la profundidad
body > p {}
Con algunas particularidades respecto al de elemento contenido:
body p {}

selector de hermanos adyacentes (en el html no debe haber otras etiquetas entre ellos)
p + p

selector de hermanos (en el html pueden intercalarse otras entre ellos)
p ~ p

Normalmente se utilizan este tipo de selectores sin hacer referencia a la clase (o id) que se le asignen.
El ejemplo más típico es el relativo a dejar sangrías en los párrafos, con independencia de otras propiedades y de las clases diferentes con las que las apliquemos.

Un caso concreto es cómo aplicar una sangría a todos los párrafos menos al primero, con total independencia de otros aspectos.
Código CSS:
Ver original
  1. p {text-indent: 0;}
  2. p ~ p {text-indent: 3em;}
Si usamos el selector de hermano adyacente (+), podríamos encontrarnos con que entre dos /p/ se intercalase otra etiqueta (una imagen por ejemplo), con lo que el párrafo siguiente a la imagen no tendría la sangría.

mariomon17:
en su caso sería:
Código CSS:
Ver original
  1. .uno:hover ~ div.tres {propiedades}
si es que sólo aplicará la clase tres a cajas.
Si quiere afectar a cualquier elemento hermano de "uno" al que le declare la clase "tres"
Código CSS:
Ver original
  1. .uno:hover ~ .tres {propiedades}

Espero haber sido capaz de explicarme.
  #15 (permalink)  
Antiguo 02/01/2011, 15:40
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 8 años, 1 mes
Puntos: 34
Respuesta: problemas con :hover

Si, ya lo entendi. Muchisimas gracias, llevaba mucho tiempo en CSS y no conocia esas "propiedades", (ahora me creo tonto por no saberlas).
Muchas gracias, un saludo!

Etiquetas: 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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 11:08.