每当鼠标悬停在页面中的元素.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对象。