每当鼠标悬停在页面中的元素.details上时,我都试图显示隐藏的div(带有类.tags)。这是可行的,但没有达到预期。
我希望鼠标应该能够输入显示的.details,甚至应该能够像在StackOverflow标签中一样单击其内容
但是鼠标离开.tags的那一刻,一切都消失了。我该如何延迟.details的出现并使其允许鼠标选择
每当鼠标悬停在.tags上时,其内容如何?

HTML代码:

<div class = 'tags'>
  <div class='details'>
    <a href='a.html'> jQuery </a>
    <a href='b.html'> PHP </a>
    <a href='c.html'> MySQL </a>
    <a href='d.html'> Ruby on Rails </a>
  </div>
</div>


CSS代码:

.details {
    background-color: rgb(235,243,243);
    border-radius: 7px;
    padding: 3px;
    width: 240px;
    float: left;
    position: relative;
    margin-top: 5px;
    font-weight: 400;
}


jQuery代码:

$(document).ready(function(){
    $('.details').hide();
    $(document).on('mouseover', ".tags", function () {
        var $this = $(this);
        $this.find('.details').slideDown(100);
    });
    $(document).on('mouseleave', ".tags", function () {
        var $this = $(this);
        $this.find('.details').hide();
    });
});


先感谢您。

最佳答案

创建jsfiddle作为答案。问题出在.parents('.tags')中,因为$this已经是tabs元素。 And $this.parents('.tags')返回空的jQuery对象。

09-17 14:36
查看更多