al pasar mouse por una div hacer que aparezca otra en otro lugar?

elcapitolio · #1 (**permalink**) 26/08/2011, 17:46

Como puedo hacer...
al pasar mouse por una div hacer que aparezca otra en otro lugar?
es posible esto?

IEKK · #2 (**permalink**) 27/08/2011, 02:43

Eso se consigue cambiando las propiedades de la CSS (p.e: display) con Javascript ya que requiere de un evento.
La CSS tiene el :hover, pero sólo se aplica para ese objeto o los elementos que contenga, por ejemplo un menu desplegable, por tanto no es posible desde hojas de estilo.

Necesitas lenguaje que se ejecute en el cliente.
Pregunta en el foro correspondiente.

IsaBelM · #3 (**permalink**) 27/08/2011, 05:07

en realidad sí que se puede hacer con css. hay que usar el selector de adyacente

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; http-equiv="Content-Type" charset=utf-8"/>
<title></title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}

#liga:hover + div {
display: block;
width:100px;
border: 1px solid #111;
position: absolute;
top: 100px;
left: 200px;
}

#tooltip{
display: none;
}

</style>
</head>
<body>
<div id="liga">link</div>
<div id="tooltip">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure</div>
</body>
</html>

IEKK · #4 (**permalink**) 27/08/2011, 05:32

IsaBelM pero hasta donde yo sé eso te va a coger el siguiente div, si hay otros por medio creo que no se obtendría el mismo resultado ¿No?

Me refiero a algo así:

Código CSS:

Ver original<div id="liga">link</div>
<div id="otro"></div>
<div id="tooltip">Lorem ipsum dolor sit amet</div>

En estos casos siempre los he visto usando js.
Pregunto porque en caso de poderse aprendería una cosa nueva

IsaBelM · #5 (**permalink**) 27/08/2011, 06:48

tenemos que partir de la base que no sabemos la estructura.

en el caso que tu expones habría que cambiar el selector de adyacente por el selector general de hermanos, además de usar selector de atributo

Cita:

#liga:hover ~ div[id="tooltip"]

IEKK · #6 (**permalink**) 27/08/2011, 07:09

oks, gracias.