0

ツールチッププラグインなしで親のインデントに応じて左から右に方向を変えることができる動的に配置されたホバーポップアップを作成する方法

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

4

1 に答える 1

2

これを行うのにjQueryは必要ありません。これは、CSSで行うことができます。

.mainを.mainに設定しrelative、.visible / .hiddenをに設定して、.hiddenabsoluteを.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-10T19:39:05.683 に答える