Dynamische Hover Popup positioniert

Question

Wie dynamisch positioniert schweben Pop-up zu schaffen, das

HTML

<div class="main"> 
    <div class="visible">visible content</div> 
    <div class="hidden">hidden content</div> 
</div> 

JS ohne Tooltip-Plugins von links nach rechts, je nach Mutter indent Richtung ändern kann

$('.main > .visible').hover(function() { 
    $('.hidden').show(); 
}, 
function() { 
    $('.hidden').hide(); 
}); 

Beispiel (wenn Sie den Mauszeiger über das Poster-Popup bewegen, ändern Sie die Richtung) http://www.ivi.ru/videos/all/all/all/by_new/?year_from=2010&year_to=2012

Answer 1

Sie brauchen dazu keine jQuery, Sie können dies in CSS tun.

Setzen Sie .main auf relative und .visible/.hidden Sie auf absolute, so dass Sie .hidden "outside" .main positionieren können, dann wird es angezeigt, wenn Sie den Mauszeiger über .main bewegen.

jsfiddle Beispiel: http://jsfiddle.net/ZjZSk/1/

.main { 
width:100px; 
height:100px; 
position:relative; 
background:#ff0000; 
} 
.main:hover .hidden { 
display:block; 
} 
.visible { 
position:absolute; 
top:0; 
left:0; 
width:100px; 
height:100px; 
} 
.hidden { 
position:absolute; 
top:0; 
left:100px; 
width:100px; 
height:100px; 
display:none; 
background:#aaaaff; 
}