通过hover另一个元素使元素可见（不带：hover-property）

好的，这是问题所在：

我有这三个DIV：

……以及这三个DIV – 它们是不可见的（显示：无;） – 在页面上完全不同的位置：

我想要做的是：如果我徘徊“gestaltung_cd”我想让“mainhexa1”可见，如果我徘徊“gestaltung_illu”我想制作“mainhexa2”visbile等等……

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

谢谢，Jochen

Answer 1

您可以使用兄弟选择器。 只要div共享同一个父级，您仍然可以使用hover来影响它们

DEMO

重要代码：

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

Answer 2

使用jQueryshoverfunction，如下所示：

 $('#gestaltung_cd').hover(function() { $('#mainhexa1').toggle(); }); 

（如果您不想在模糊时隐藏div，则将toggle（）更改为show（））

Answer 3

使用jQuery的hoverfunction：

 var divs = { cd: 'mainhexa1', illu: 'mainhexa2', klassisch: 'mainhexa3' }; $('[id^=gestaltung]').hover(function(){ // selects all elements whose id starts with gestaltung $('#'+divs[this.id.slice('gestaltung_'.length)]).toggle(); }); 

请注意，在开启者和开放元素之间建立一些关系可能更容易，比如类或其他属性（如nnnnnn的答案）。

Answer 4

这是一个如何做第一个的例子，你只需要对其他两个用相关的ID做同样的事情。

 $("#gestaltung_cd").hover( function () { $("#mainhexa1").show(); }, function () { $("#mainhexa1").hide(); } ); 

Answer 5

我建议你在前三个div中添加一个属性，指定在hover时显示哪个div：

这样，只需使用.hover()方法就可以在hover时处理显示/隐藏：

 $("div[data-maindiv]").hover(function() { $("#" + $(this).attr("data-maindiv") ).show(); }, function() { $("#" + $(this).attr("data-maindiv") ).hide(); }); 

演示： http ： //jsfiddle.net/GFMQR/

Answer 6

 $("#gestaltung_cd").hover(function({ $("#mainhexa1").css({ "visibility": "visible" }); }, function() { //Your hover out function }); 

Answer 7

如果你将每个div块包装在一个容器中，你可以通过索引匹配它们，这将使代码工作，无论有多少div。 像这样的东西：

 
 
gestaltung_cd
 
gestaltung_illu
 
gestaltung_klassisch
 
 
 
mainhexa1
 
mainhexa2
 
mainhexa3
  

 $('.gesaltung-container div').hover( function () { $('.mainhexa-container div').eq($(this).index()).show(); }, function () { $('.mainhexa-container div').eq($(this).index()).hide(); } ); 

示例小提琴

Answer 8

仅供记录……

你可以只用CSS和HTML（没有javascript）来实现你想要的效果，但你必须让你的元素互相跟随并在CSS中使用+ selector。 就像是 ：

HTML

CSS

 div#gestaltung_cd:hover + div#mainhexa1 { display:block; } div#gestaltung_illu:hover + div#mainhexa2 { display:block; } div#gestaltung_klassisch:hover + div#mainhexa3 { display:block; } 

你可以查看演示http://tinkerbin.com/KP17XUgq