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

鼠标离开后如何重置位置？

我用过

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

如何在鼠标悬停时更改div位置？

2 个答案: