동적 호버 팝업 위치 동적 위치 호버 팝업을 만드는 방법

Question

, 좌우가

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

JS

HTML에게 도움말 플러그인없이 상위 오목면

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

을 따라에서 방향을 바꿀 수 예 (포스터 팝업으로 마우스를 가져 가면 방향이 바뀝니다) 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 위로 마우스를 가져 가면 표시됩니다.

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; 
}