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

如何关闭那个生物信息弹出窗口请帮助我如何在代码上面实现。

Answer 1

尝试：

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

HTML

 <ul class="ch-grid">
  <li>
<div class="bioinfo">
 <h2>tooltips</h2>
</div>

确保在<

上添加/div>

Answer 2

这可能就是你要找的东西。

我在标记中添加了颜色以显示不同的元素边界。您可以看到这会将边距返回到之前的设置。

jsFiddle Demo

$('.ch-grid > li').hover(
    function () {
        //hover IN
        //alert( $(this).attr('id') );
        $(this).css({position: 'relative', marginRight: 120});
        $(this).children('.bioinfo').show();
    }, 
    function () {
        //hover OUT
        $(this).css({position: 'relative', marginRight: 0});
        $('.bioinfo').hide();
    }

Answer 3

试试这个

$('.instance > li').hover(function() {
    $(this).css({position: 'relative', marginRight: 120});
    $(this).children('.bioinfo').show();
}, function() {
    $(this).children('.bioinfo').hide();
});

如何关闭弹出窗口

3 个答案: