动态定位悬停弹出
问题描述:
如何创建动态定位悬停弹出窗口中,可以从左至右取决于父缩进没有提示插件动态定位悬停弹出
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
答
你不需要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;
}
如果你有一个定义每行的元素数量和定义的大小弹出窗口(如上例),你知道,如果弹出将适合的页面,你可以对齐它正确 – 2012-04-10 16:35:42