动态定位悬停弹出

Question

如何创建动态定位悬停弹出窗口中，可以从左至右取决于父缩进没有提示插件

HTML

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

JS

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

改变方向示例（当悬停在海报弹出框上时改变方向） http://www.ivi.ru/videos/all/all/all/by_new/?year_from=2010&year_to=2012

Answer 1

你不需要jQuery来做到这一点，你可以在CSS中做到这一点。

将.main设置为relative和.visible/.hidden至absolute，以便您可以将.hidden“outside”.main放置，然后在将鼠标悬停在.main上时显示它。

的jsfiddle例如：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; 
}