display no le hace caso al :hover (es porfiado)

bkolores · #1 (**permalink**) 21/01/2010, 16:01

Hola amigos, comunmente acá más aporto o ayudo que pregunto pero ahora me dejo en jaque una idea de esas que te dan cuando andas motivado.
bueno ocurre que quiero hacer un div por ejemplo x1 con un alto y ancho fijo y un fondo... y quiero que al situarse sobre el div x1:hover aparesca un div x2 dentro de x1 mi logica me dice lo siguiente

Código CSS:

Ver originaldiv#x1 {
  /* FONDO
  ANCHO 
  ALTO
  BORDE
 ETC.
}/* Aqui le di todas las propiedades que para este caso no son importantes... */
 
div#x2 {
  display:none;
}/* aqui digo que div#x2 no se vea (ENTONCES PARA QUE LO CREE??? BUENO tranquilein yon wein aqui viene*/
 
/* AQUI SEGUN YO LA MATHERFUCKER */
div#x1:hover div#x2 {
  display:block;
}

bien yo entiendo que eso dice así (musica maestro)....
que div x2 se comporta con display block mientras este dentro de divx1 y este este con hover (osea con el cursor sobre)...

el problema???
no funciona xD... obvio que por eso posteo, pero no le hace caso al display block, entonces no se que es?

Saludos y ojala me ayuden .

Carlangueitor · #2 (**permalink**) 21/01/2010, 16:20

Lo que pasa es que cuando pones: div#x1:hover div#x2 Estás haciendo algo así como: el div x2 que esta dentro de un div x1.... (aunque no es válido de todas formas). Quizá este ejemplo te pueda ayudar:

http://www.araudi.net/ejemplos/tooltip_activo2.html

Saludos

bkolores · #3 (**permalink**) 21/01/2010, 21:09

no es valido??? yo lo valido con css2 y funciona
explicame eso?

sorry pero lo probe y valida.

Carlangueitor · #4 (**permalink**) 21/01/2010, 23:37

Perdón, error mio lo de la validación.

Tienes por ahí el HTML, quizá es por eso que noeste dando una buena respuesta.

Saludos

tistklehoff · #5 (**permalink**) 22/01/2010, 03:12

Hola.

Según estoy probando, funciona bien con el siguiente HTML:

Código:

<HTML>
 <HEAD>
  <TITLE></TITLE>
  <style type="text/css">

      div#x1 {
		border: 1px solid red;
		height: 400px;
		width: 400px;
      }

      div#x2 {
        display:none;
		border: 1px solid blue;
      }

      div#x1:hover {
		border: 2px solid green;

      }

      div#x1:hover div#x2 {
        display:block;

      }

  </style>
 </HEAD>

 <BODY>
	<div>
		<div id="x1">
			div 1
			<div>
				<div id="x2">
					div 2
				</div>
			</div>
		</div>
  
 </BODY>
</HTML>

Lo que sí que he encontrado es que aunque en Firefox va bien, en IE tiene un problema: Estoy usando el IE8 para probarlo y va bien sólamente si le digo que es un documento estándar 7 o estándar 8. Si le digo que es un documento 'no estándar', no funciona (en IE8, menú Herramientas -> Herramientas de desarrollo, ó pulsar F12).

Si indicas el navegador y el HTML podríamos afinar más la respuesta.

Un saludo.