的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（）如預期

回答

相關問題