在Hover上滑下Div，让Div Stay悬停？

Question

我希望在Shopify.ca上实现类似的功能，您可以将鼠标悬停在div上以直接展开另一个div，并带有滑动效果。当你将鼠标悬停在扩展的div上时，它会留在那里。然后当鼠标悬停在扩展div之外的任何地方时缩回。

这是我到目前为止的JSFiddle，问题是当你将鼠标悬停在扩展的那个上时div会消失。

Answer 1

这是一个小提琴：http://jsfiddle.net/mcs9D/1/

您可能希望将其改编为代码，而不是盲目地复制和粘贴。

我的实现使用CSS和jQuery的组合。

基本上，你有三层：

1. 包含所有问题的外部容器，以便它们一次向下滑动
2. 每个问题的内部容器，包含问题及其答案
3. 内部容器中的任何内容（问答）

你唯一真正需要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;
}

Answer 2

要将展开的div保持展开，将鼠标悬停在展开的div上时，应使两个元素（触发器和扩展器）成为包含在单个包装器元素中的兄弟元素。例如：

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

然后，当.wrapper悬停而不是标题时，您将应用扩展，当您将鼠标从标题移动到扩展文本时，它将保持展开状态。