javascript - 悬停时不显示工具提示 Div

Question

我已经使用了下面的代码来在悬停时显示详细信息，但是 div 正在向左侧移动，但是 bioinfo 没有显示，所以你能指导一下吗？如何在 jquery 中实现它。

在 html 文件中

  <ul class="ch-grid">
    <li>
    <div class="ch-item ch-img-1">
     <div class="ch-info">  </div>
    </div>

     <div class="bioinfo">
        <h2>Details of the image initially it should hide</h2>
     </div>
    </li>
    </ul>

在 CSS 文件中

CSS文件

.ch-grid li .person-profile nav ul li {
    display: inline-block !important;
    height: 56px !important;
    margin: 0px !important;
    width: 36px !important;
}


.ch-img-1 { 
    background-image: url(../images/image.png);
}


.bioinfo {
    display: none;
    background: rgba(246,246,246, 0.8);
    font-size: 10px;
    padding: 15px 3px 3px 3px;
    text-align: justify;
}  

在 Jquery 中

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

    });

悬停时如何显示生物信息。

Answer 1

如果您只想在悬停时显示 .bioinfo，请参阅

FIDDLE

您不需要任何 jQuery 来执行此操作 - 但我看到您正在使用您可能希望合并到 CSS 中的动画。您可以使用 :hover pseudo class in CSS 切换悬停行为。 .

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;
    z-index: 100;
    /*    background: #eeeded; f6f6f6*/
    background: rgba(246, 246, 246, 0.8);
    font-size: 10px;
    padding: 15px 3px 3px 3px;
    text-align: justify;
}
li:hover .bioinfo {
    display:block;
}