css - 悬停标签时它会消失

Question

我有一个元素的悬停功能，可以在数据库中检索数据。它工作正常，但是当我将鼠标放在结果上时它会消失。我该如何解决这个问题。

我的 html 代码:

<label class="pending"><a>'+parseFloat(details.pending_aprov).toLocaleString(undefined, {minimumFractionDigits: 2,maximumFractionDigits: 2})+'</a></label>\
                                        <div class="pending pending'+details.po_no+'" ></div>

j查询代码:

$('label.pending').hover(function(){
                    var po_id = $(this).closest('tr').find('.po_id').val();
                    $.getJSON('/dev/api/getpending?po_id=' +po_id, function(results2){
                        $('div.pending'+po_id+'').empty();
                        $.each(results2, function(key, details){
                            $('div.pending'+po_id+'').append('<tr><td><a href="" >CV - '+details.cv_header_id+'</a></td></tr>');
                        })
                    })
                    $('div.pending'+po_id+'').slideToggle();
                })

和我的CSS:

div.pending{
    position: absolute;
    margin-top: -2px;
    display: none;
    float: left;
    clear: both;
    background-color: #666;
    padding: 0 2% 2% 2%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    list-style: none;
}

Answer 1

我正在添加一个 li 标签并将该元素放在 li 中。并添加 href 的 css。

html:

<li class="pend" style="list-style: none;"><label><a href="#">'+parseFloat(details.pending_aprov).toLocaleString(undefined, {minimumFractionDigits: 2,maximumFractionDigits: 2})+'</a></lable>\
                                        <div class="pending pending'+details.po_no+'" ></div></li>

CSS:

a {
    text-decoration: none;
    color: white;
    background-color: #666;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 10px 20px;
    list-style: none;
}