懸停時不顯示工具提示Div

Question

我已經使用了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>

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

    });

如何在懸停時顯示bioinfo。

Answer 1

如果您只是想在懸停時顯示.bioinfo ，請參閱

小提琴

你不應該需要任何jQuery來做到這一點 - 但是我看到你正在使用一個動畫，你可能想要將它整合到CSS中。 您可以通過在CSS中使用：hover偽類來切換懸停行為。

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

Answer 2

除了破損的標簽，你的代碼沒問題。 保持你的標記相同，刪除right: -150px; 從類bioinfo和更改top:150px到top:0你在css中的top:0 ，它工作得很好。 工作代碼