通过悬停另一个元素使元素可见(没有:hover-property)-前端问题

Making an element visible by hovering another element (without :hover-property)(通过悬停另一个元素使元素可见(没有:hover-property))

本文介绍了通过悬停另一个元素使元素可见(没有:hover-property)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

好的，问题来了:

我有这三个 DIV:

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

...而这三个 DIV——它们是不可见的 (display: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"，我想让mainhexa2"可见，依此类推……

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 不是前三个 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?

谢谢，乔辰

推荐答案

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

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

演示

生命密码:

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

这篇关于通过悬停另一个元素使元素可见(没有:hover-property)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！