制作悬停另一个元素（不包括：悬停性能）可见元素

Question

好，这就是问题所在：

我有这三个的DIV：

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

...这三个资料核实 - 这是看不见的（显示：无;） - 页面上完全不同的位置：

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

我想要做的是： 如果我悬停“gestaltung_cd”我想拍“mainhexa1”可见，如果我徘徊“gestaltung_illu”我想使“mainhexa2”visbile等...

正如你所看到的，三个无形的DIVs不是前三个子元素...所以“：悬停”不是在这种情况下可能。有没有一种简单的方法在JQuery中做到这一点？

感谢， 约亨

Answer 1

您可以使用兄弟选择器。只要div的份额相同的父，你仍然可以影响到他们与悬停

DEMO

重要代码：

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

Answer 2

使用jQuery的hover功能：

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 3

使用jQuerys悬停功能，如：

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

（如果你不想隐藏在模糊的股利，然后改变拨动（）来显示（））

Answer 4

下面是一个例子如何做第一个，你只需要为其他两个相同的ID做同样的事情。

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

Answer 5

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

Answer 6

我建议你的属性添加到前三的div指定显示悬停其格：

<div id="gestaltung_cd" data-maindiv="mainhexa1"></div> 
<div id="gestaltung_illu" data-maindiv="mainhexa2"></div> 
<div id="gestaltung_klassisch" data-maindiv="mainhexa3"></div> 

这样，您就可以处理悬停显示/隐藏与单一使用.hover()方法：

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

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

Answer 7

如果你包的div的每个块在一个容器中，你可以对其进行匹配通过索引，这将使代码工作，无论有多少div。事情是这样的：

<div class="gesaltung-container"> 
    <div id="gestaltung_cd">gestaltung_cd</div> 
    <div id="gestaltung_illu">gestaltung_illu</div> 
    <div id="gestaltung_klassisch">gestaltung_klassisch</div> 
</div> 
<div class="mainhexa-container"> 
    <div id="mainhexa1">mainhexa1</div> 
    <div id="mainhexa2">mainhexa2</div> 
    <div id="mainhexa3">mainhexa3</div> 
</div> 

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

Example fiddle

Answer 8

只是为了记录...

你可以做你想做只用CSS和HTML（无javascript）的效果，但你必须将您的元素相互关联，并在CSS中使用+选择器。喜欢的东西：

HTML

<div id="gestaltung_cd"></div> 
<div id="mainhexa1"></div> 
<div id="gestaltung_illu"></div> 
<div id="mainhexa2"></div> 
<div id="gestaltung_klassisch"></div> 
<div id="mainhexa3"></div> 

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