jquery - 动态定位悬停弹出窗口

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 定位在“外部”.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;   
}