製作懸停另一個元素（不包括：懸停性能）可見元素

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