Javascript 悬停时不显示工具提示Div

我已经使用了belwo代码来显示悬停时的详细信息，但是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>

在Jquery中

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

    });

---

如何在悬停时显示bioinfo。

如果您只是想在悬停时显示

。bioinfo

，请参阅

您不需要任何jQuery来完成这项工作，但我看到您正在使用一个动画，您可能希望将其合并到CSS中。您可以使用切换悬停行为

CSS

---

除了断开的标记，您的代码很好。保持标记不变，删除

right:-150px从class
bioinfo
更改为
top:150px
到
top:0
，在css中运行良好。这里是
你应该提供的html不是不完整的，也没有损坏的标签。A会很有用。我已经修改了请指导。
$('.ch-grid > li').hover(function() {
                $(this).animate({ marginRight: 120 });
                $(this).children('.bioinfo').show();
    }, function() {
            $(this).animate({ marginRight: 0 });
        $('.bioinfo').hide();

    });

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