通过将鼠标悬停另一个元素（不含：悬停性能）使可见的元素(Making an element visi

好了，这就是问题所在：

我有这三个的DIV：

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

...和这三个的DIV - 其是不可见的（显示：无;） - 网页上的一个完全不同的位置：

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

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

你可以看到，这三个无形的DIV是第一三一的无子元素......这样“：悬停”在这种情况下是不可能的。有没有一种简单的方法在jQuery来做到这一点？

谢谢，约亨

Answer 1:

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

DEMO

重要的代码：

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

Answer 2:

使用jQuerys悬停功能，就像这样：

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

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

Answer 3:

使用jQuery的悬停功能：

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，指定哪个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 6:

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

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();
    }
);

例如拨弄

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

文章来源: Making an element visible by hovering another element (without :hover-property)