Как я могу изменить позицию div во время мыши?

Question

Я использовал приведенный ниже код для отображения всплывающего окна вместе с положением изменения во время зависания. Моя проблема заключается в том, что часть наведения не установлена ​​на прежнюю позицию после ухода с мыши.

Как закрыть всплывающее окно с биоинформацией?

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

$('.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(); 
}); 

Как я могу сбросить позицию после того, как смертное e оставить?

Я использовал

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

для перемещения DIV при наведении курсора мыши.

Answer 1

Это немного грязный способ сделать это. Я бы предпочел создать класс, который имеет измененные свойства CSS, а затем включить и выключить этот класс, когда вы входите и выходите из него. Это также сократит код, необходимый для функции наведения.

Answer 2

Быстрое исправление для вашего кода будет сбросить правое поле на событии 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(); 
});