在使用CSS或JS的非父级的其他DIV上悬停时显示DIV

Question

现在我可以用CSS做到这一点,但它只有在隐藏的div是父级的子级时才有效.您在父DIV和CSS集悬停在悬停从显示孩子none来block,这样的事情.

但是,如果隐藏的块位于您悬停的div之外且隐藏的块出现,您如何做到这一点？

例:

<div class="field-1"></div>
<div class="field-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt consequat tristique. Curabitur vestibulum semper nulla id ornare.</div>

JSFiddle http://jsfiddle.net/23u3rmx5/当你将鼠标悬停在红色区块上时,.field -2必须出现在它下方.你不能移动div结构,例如在.field-1里面移动.field-2,我可以这样做,但那不是解决方案.

感谢您的帮助和欢呼!周末愉快!

Answer 1

在这个特定的实例中,您可以使用相邻的兄弟组合器+来定位具有.field-2类的元素,如下所示:

这里的例子

.field-1:hover + .field-2 { display: block; }

此外,如果.field-2不立即跟随.field-1,您可以尝试使用通用兄弟组合器~:

这里的例子

.field-1:hover ~ .field-2 { display: block; }