通过悬停另一个元素（无：hover-property）使元素可见 [英] Making an element visible by hovering another element (without :hover-property)

问题描述

好的，这里有问题：

我有这三个DIV：

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

...这三个DIV-是不可见的（显示：none;在页面上：

…and these three DIVs – which are invisible (display:none;)– on a completely different position on the page:

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

我想做的是：
如果我悬停gestaltung_cd mainhexa1可见，如果我徘徊gestaltung_illu我想使mainhexa2visbile等...

what i want to do is: if i hover "gestaltung_cd" i want to make "mainhexa1" visible and if i hover "gestaltung_illu" i want to make "mainhexa2" visbile and so on…

你可以看到，三个看不见的DIV没有孩子 - 前三个元素的元素...所以：hover在这种情况下是不可能的。在JQuery中有一个简单的方法吗？

as you can see, the three invisible DIVs are no child-elements of the first three ones... so ":hover" is not possible in this case. Is there an easy way to do this in JQuery?

谢谢，
Jochen

thanks, Jochen

推荐答案

您可以使用同级选择器。

You could use the sibling selector. As long as div's share the same parent, you can still affect them with hover

DEMO / a>

生命代码：

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

这篇关于通过悬停另一个元素（无：hover-property）使元素可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！