Question

每当鼠标悬停在页面中的元素.details时，我都会尝试显示隐藏的 div （带有类.tags）。这是有效但不如预期。我希望鼠标应该能够输入显示的.details，甚至可以点击其内容，就像我们在StackOverflow标签中一样但是当鼠标离开.tags时，一切都消失了。如何延迟.details的外观并允许鼠标选择鼠标悬停在.tags上时的内容？

HTML code：

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

提前谢谢。

Answer 1

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

Answer 2

将此样式添加到您的页面，看看是否有帮助

.tags {
   height: 100px;
   width: 200px;
}

原因是因为.tags div太小了。即使.details div填充了.tags div，它也不会强制元素的大小增加。

这就是为什么你很难在.details div

中导航

Answer 3

您正在隐藏要控制鼠标移动事件的标记。

另外，看看这种设置选择器的方式，它使它更具可读性：

$(".tags").on('mouseover', function () {
    alert("hi");
});

http://jsfiddle.net/tVEkF/

jQuery hide（）和show（）没有按预期工作

3 个答案: