的jQuery的hide（）和show（）如预期

我想显示隐藏DIV（一类.details）不工作，每当在一个页面中的元素.tags鼠标悬停。这是工作，但不是预期的。我希望鼠标应该能够进入显示的.details，甚至应该能够点击它的内容，因为我们在这里在StackOverflow标签但是当鼠标离开.tags一切都消失了。我该如何延迟.details的外观，并让鼠标在.tags上鼠标悬停时可以选择其内容？的jQuery的hide（）和show（）如预期

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

感谢您在ADVAN CE。

来源

2014-01-15 Yax

导航创建的jsfiddle请，在此代码'tags'不是用户可见。 – Pinal

我已经读了你的问题3次，我仍然不明白你的问题... “鼠标叶'.details'一切都消失了 - ”从你的代码，这是预期的结果。 “延迟外观” - 所以当用户将鼠标悬停在'.tags' div上时不想显示细节？ –

我已经复制你的代码。悬停时显示'.details'，我可以点击链接。如果远离隐藏的细节，这是不是预期的行为？ –

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

来源

2014-01-15 10:56:22 Pinal

-2

您正在隐藏您想要控制鼠标悬停事件的标签。

而且，看设置选择的这种方式，使得它更具可读性：

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

http://jsfiddle.net/tVEkF/

来源

2014-01-15 10:56:11 Askanison4

这并没有真正回答这个问题。 –

他隐藏标记，然后将鼠标悬停在事件上。这是行不通的。我还提供了一个更好的方式来附加事件，以免混淆他。这不能回答这个问题吗？ – Askanison4

这种风格添加到您的网页，看看这有助于

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

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

这就是为什么它是如此，你很难跨越.details DIV

来源

2014-01-15 12:26:02

的jQuery的hide（）和show（）如预期

回答

相关问题