Question

我想将鼠标悬停在子元素上，以便在tumblr上显示最近的页脚div。

<div class="entry">
{block:Posts}
<div class="container">
{block:Text}{/block:Text}
{block:Photo}{/block:Photo}
{block:Text}{/block:Text}
</div>
<div class="footer"></div>
{/block:Posts}
</div>

页脚类将被隐藏，但我想要它，以便当我将鼠标悬停在任何一个帖子类型上时，只显示该帖子的页脚。

示例：

我将鼠标悬停在关于某事的文本帖子上，它会专门显示该帖子的页脚！

任何帮助将不胜感激！

编辑：我认为我的情况没有得到妥善解释所以我更新了！

Answer 1

你可以有一个css规则，有条件地隐藏这两个，只要一个没有徘徊。

.one:not(:hover) + .two {
  display: none;
}

<div class="one">hi</div>
<div class="two">this</div>

<div class="one">is</div>
<div class="two">an</div>

<div class="one">example</div>
<div class="two">code</div>

Answer 2

当一个简单的CSS悬停和下一个兄弟选择器可以显示它时，你真的不需要JavaScript。

.two {
   display: none;
}

.one:hover + .two {
  display: block;
}

/* If you want it to stay open if you are on the other div*/
.two:hover {
  display: block;
}

<div class="one">hi</div>
<div class="two">this</div>

<div class="one">is</div>
<div class="two">an</div>

<div class="one">example</div>
<div class="two">code</div>

Answer 3

使用jquery next()函数和mouseneter，mouseleave来模拟悬停效果：

<强> CSS ：

.one {}
.two {display:none;}

<强>的javascript ：

jQuery('.one').on('mouseenter', function(){
    $(this).next('.two').css('display', 'block');
});

jQuery('.one').on('mouseleave', function(){
    $(this).next('.two').css('display', 'none');
});

jsfiddle

如何在悬停时显示最近的div？

3 个答案: