通过悬停另一个元素使元素可见(不带:hover-property)

Question

好的,这是问题所在:

我有这三个DIV:

<div id="gestaltung_cd"></div>
<div id="gestaltung_illu"></div>
<div id="gestaltung_klassisch"></div>

......以及这三个DIV - 它们是不可见的(显示:无;) - 在页面上完全不同的位置:

<div id="mainhexa1"></div>
<div id="mainhexa2"></div>
<div id="mainhexa3"></div>

我想要做的是:如果我徘徊"gestaltung_cd"我想让"mainhexa1"可见,如果我徘徊"gestaltung_illu"我想制作"mainhexa2"visbile等等......

正如你所看到的,三个不可见的DIV不是前三个中的子元素......所以":hover"在这种情况下是不可能的.有没有一种简单的方法在JQuery中执行此操作？

谢谢,Jochen

Answer 1

您可以使用兄弟选择器.只要div共享同一个父级,您仍然可以通过悬停来影响它们

DEMO

重要代码:

#gestaltung_cd:hover ~ #mainhexa1,
#gestaltung_illu:hover ~ #mainhexa2,
#gestaltung_klassisch:hover ~ #mainhexa3 {
    display: block;
}