Question

好的，问题在于：

我有这三个DIV：

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

......以及这三个DIV--它们是不可见的（display：none;） - 位于页面上完全不同的位置：

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

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

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

感谢，约亨

Answer 1

您可以使用兄弟选择器。只要div与同一父母共享，您仍可以使用悬停

来影响他们

DEMO

重要代码：

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

Answer 2

使用jQuery悬停功能，如下所示：

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

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

Answer 3

使用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 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：

<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

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

8 个答案: