將鼠標放在懸停位置上，讓Div保持懸停狀態？

-1

我想才達到類似的Shopify.ca，在那裏你可以一個div來擴張另一正下方，用滑動效果將鼠標懸停在。當你在擴展的div上徘徊時，它會停留在那裏。然後在您將鼠標懸停在展開的div之外的任何位置時收回。將鼠標放在懸停位置上，讓Div保持懸停狀態？

enter image description here

這在我的jsfiddle到目前爲止，這個問題是div消失，當你將鼠標懸停在擴展之一。

來源

2014-04-27 afang

code，css，html？ –

如何，請訪問http://api.jquery.com並詳細瞭解一下。嘗試一下，然後發佈任何有問題的代碼在堆棧溢出並請求調試？ –

如果你不確定從哪裏開始，搜索「jQuery教程」 –

這裏有一個小提琴：http://jsfiddle.net/mcs9D/1/

你可能會想的是去適應你的代碼，而不是盲目地複製和粘貼。

我實現使用CSS和jQuery的組合。

基本上，你有三個層次：

包含所有的問題，所以他們都滑下一次
對於同時包含問題和回答每個問題的內部容器的外部容器
內部容器內的所有內容（答問）

你真正需要的JavaScript的唯一的事情就是擊倒效果的幻燈片。當您將鼠標懸停在第一層或外部容器上時，即可完成此操作。

$('.faq').hover(function() { 
    $(this).find('.question p').slideDown(); 
}, function() { 
    $(this).find('.question p').slideUp(); 
});

的效果，你可以用CSS管理其他：

.faq 
{ 
    border: 1px solid black; 
    padding: 20px; 
} 

.faq:before, 
.faq:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.faq:after { 
    clear: both; 
} 

.faq .question 
{ 
    float: left; 
    display: inline-block; 
    width: 33%; 
} 

.faq .question p 
{ 
    display: none; 
    color: #555; 
} 

.faq .question:hover p 
{ 
    color: black; 
}

來源

2014-04-27 16:20:54

非常感謝Sunjay，我明白它現在的工作原理。然而，當你將鼠標懸停在其上時（或者將鼠標懸停並快速移動），該過程會很快收回。我將如何製作，以便在div再次展開之前有一段時間限制？ – afang

您可以使動畫更快。或者你可以添加一個回調到slideDown（）調用，當動畫完成時它會設置一個布爾值。然後可以使用該布爾值來確定是否在鼠標離開時調用slideUp（）。然而，第二種方法可能會引入一些錯誤，因此可能最好將其保留原樣。只要動畫速度足夠快，用戶就會知道這些事情。 –

要具有擴展的div處於展開狀態，當你在它懸停，你應該讓這兩個元素（觸發器和擴展器）是包含在單個包裝元素中的兄弟姐妹。例如：

<div class="wrapper"> 
    <div class="title">Some Title</div> 
    <div class="expand">The text you want to expand out</div> 
</div>

，那麼你會申請時.wrapper盤旋而不是標題的擴展，當你從標題到擴展的文本移動鼠標將繼續擴大。

來源

2014-04-27 16:25:34 jshanley

將鼠標放在懸停位置上，讓Div保持懸停狀態？

回答

相關問題