2011-05-10 17 views
5

Digamos que tengo varios de div como éstas:¿Cómo mostrar un div junto al elemento al revés con jQuery?

EDIT:

<div class="ProfilePic"> 
    <a href="#"> 
     <img src="lib/css/img/profile_pic1.png" alt="" class="ProfilePicImg"/> 
    </a> 

    <div class="PopupBox" style="display:none;"> ... </div> 
</div> 

Quiero ser capaz de flotar sobre la imagen .ProfilePicImg y mostrar a otros div relativamente a la misma.

El recuadro que aparece en el elemento emergente está establecido en position:absolute. Y la posición de .ProfilePic es relativa. Justo como debe ser.

que han probado diferentes soluciones, pero en vano ... y también he buscado por aquí en StackOverflow ...

¿Alguien tiene un truco para esto?

P.S. no quiero la caja emergente para mostrar en cada una de las .ProfilePic div de que tengo ...

Edit2: Parece función .find() recorrido de jQuery fue la clave para buscar el específica .PopupBox que quería mostrar, en lugar del todo.

+0

'No quiero que el cuadro emergente para mostrar en cada ...' ¿Cuáles son las condiciones bajo las cuales se muestran emergente? ¿Puedes mostrar el marcado completo incluyendo el div para mostrar? – TheVillageIdiot

+0

La condición es que cuando muevo el mouse sobre ** __ un __ ** de los DIV's de '.ProfilePic', solo quiero que aparezca el cuadro emergente al lado, aunque esté oculto y especificado dentro de cada uno de los'. ProfilePic' DIV's. – KristianB

+0

¿Puede mostrarnos dónde guarda la ventana emergente? –

Respuesta

14

No he probado el código, pero ¿es esto lo que está buscando?

$(".ProfilePicImg").hover(function(){ 
    var divToShow = $(this).parent("a").siblings("div.PopupBox"); 
    divToShow.css({ 
     display: "block", 
     position: "absolute", 
     left: ($(this).offset().left + $(this).width()) + "px", 
     top: $(this).offset().top + "px" 
    }); 
}, 
function(){ 
    $("div.PopupBox").hide(); 
}); 
+0

¿Cómo se obtiene '$ (" # divToShow ");'? – TheVillageIdiot

+0

Supongo que hay un solo div que muestra los contenidos dinámicos de acuerdo con la imagen suspendida. Pero sí, el ejemplo que he dado es solo para mostrar el div, no el contenido. Tal vez asumí que estaba equivocado: D. –

+0

Dándole crédito por llevarme a la respuesta. Ver mis ediciones para más información. – KristianB

0

¿Por qué no utilizar CSS?

#PopupBox { 
    z-index: 1000; 
    margin-top: -15px; 
    margin-left: 90px; 
    position: absolute; 
    background-color: #abcdef; 
    padding: 1em; 
    border: 1px solid #456789; 
} 
Cuestiones relacionadas