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，请参阅

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

Answer 2

除了破损的标签，你的代码还可以。保持您的标记一致，从{c = 1}}中移除right: -150px;并将bioinfo更改为{c}中的top:150px，它就可以了。 WORKING CODE

悬停时不显示工具提示Div

2 个答案: