2013-12-19 8 views
0

나는 호버 동안 변경 위치와 함께 팝업을 보여주는 아래의 코드를 사용했다. 내 문제는 마우스를 놓은 후 호버 파트가 이전 위치로 설정되어 있지 않다는 것입니다.마우스를 올려 놓은 상태에서 div 위치를 어떻게 바꿀 수 있습니까?

어떻게 바이오 정보 팝업을 닫을 수 있습니까?

HTML

<ul class="ch-grid"> 
    <li> 
<div class="bioinfo"> 
<h2>tooltips</h2> 
/div> 

CSS

.bioinfo { 
    display: none; 
    max-height: auto; 
    max-width: 220px; 
    overflow: hidden; 
    border-radius: 10px; 
    box-shadow: rgba(108,108,108, 0.5) 5px 5px 5px; 
    border: 2px solid #ccc; 
    position: absolute; 
    top: 150px; 
    right: -150px; 
    z-index: 100; 
/* background: #eeeded; f6f6f6*/ 
    background: rgba(246,246,246, 0.8); 
    font-size: 10px; 
    padding: 15px 3px 3px 3px; 
    text-align: justify; 
} 

jQuery를 할 수있는 내가 MOUS 후 위치를 다시 설정하는 방법

$('.ch-grid > li').hover(function() { 
     //$('.ch-item').click(function() { 

      //alert('ddl'); 
      //$(this).css({position: 'relative', left: -200}); 
      $(this).css({position: 'relative', marginRight: 120}); 
      $(this).children('.bioinfo').show(); 
}, function() { 
    $($(this).data('.bioinfo')).hide(); 
}); 

떠나요?

나는 유혹 할 때 사업부를 이동

$(this).css({position: 'relative', marginRight: 120}); 

을 사용했다.

+0

질문을 조금 더 명확하게 해 주실 수 있습니까? –

답변

1

이 작업을 수행하는 데 지저분한 방법입니다. 차라리 CSS 속성이 변경된 클래스를 만든 다음이 클래스를 열거 나 닫을 때 해당 클래스를 켜거나 끕니다. 또한 호버 기능에 필요한 코드도 단축됩니다.

+0

그는 이미 margin을 재설정하지 않고 handlerOut 이벤트를 정의하고 있습니다. 오른쪽 여백을 다시 설정하면 -150이 아니라 0이어야합니다. 그러나 가장 좋은 방법은 CSS 클래스를 토글하고 CSS의 모든 스타일/상태를 정의하는 것입니다. – thebiffboff

+0

@thebiffboff를 지적 해 주셔서 감사합니다. 나는 그것을 반영하기 위해 나의 대답을 편집 할 것이다. –

0

코드에 대한 빠른 수정은 mouseOut 이벤트에 오른쪽 여백을 다시 설정하는 것입니다 : 그러나, 당신이 여기 작업을 수행하지 않는

$('.ch-grid > li').hover(function() { 
    $(this).css({position: 'relative', marginRight: 120}); 
    $(this).children('.bioinfo').show(); 
}, function() { 
    $(this).css({ marginRight: 0}); 
    $(this).children('.bioinfo')).hide(); 
}); 

순수 CSS와 함께 할 수 없었다. JQuery와를 제거하고 동일한 결과를 달성하기 위해 CSS를 추가

.ch-grid > li:hover{ position: relative; right: 120px; } 
.ch-grid > li:hover .bioinfo{ display: block; } 

을 아래에 코멘트에서 요청으로, 여기에 애니메이션을 수행하는 방법이다. 1500은 밀리 초 단위의 애니메이션 길이이며, 애니메이션을 조정하여 원하는 방식으로 변경하십시오.

$('.ch-grid > li').hover(function() { 
    $(this).animate({position: 'relative', marginRight: 120}, 1500); 
    $(this).children('.bioinfo').show(); 
}, function() { 
    $(this).animate({marginRight: 0}, 1500); 
    $(this).children('.bioinfo')).hide(); 
}); 
+0

정말 놀랍습니다. 아주 천천히 오른쪽으로 움직이는 법? 다음 코드를 시도했지만 사용하지 않습니다. $ ('.ch-grid> li'). $ (this) .css ({위치 : '상대', marginRight : (0)}; $ (this) {0} {0}) {0}}} { .children ('. bioinfo')). 숨기기(); }}); – Alex

관련 문제