1

好的，问题来了：

我有这三个 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”可见等等……</p>

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

谢谢，乔臣

4

8 回答 8

8

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

演示

重要密码：

#gestaltung_cd:hover ~ #mainhexa1,
#gestaltung_illu:hover ~ #mainhexa2,
#gestaltung_klassisch:hover ~ #mainhexa3 {
    display: block;
}
于 2013-02-07T10:58:52.500 回答
2

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

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

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

于 2013-02-07T10:57:48.077 回答
1

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

请注意，在 opener 和 opening 元素之间建立某种关系可能更容易，例如类或其他属性（如 nnnnnn 的答案）。

于 2013-02-07T10:57:19.110 回答
0

如果您将每个 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();
    }
);

示例小提琴

于 2013-02-07T11:01:33.157 回答
0

这是如何执行第一个示例的示例，您只需对具有相关 ID 的其他两个执行相同操作即可。

$("#gestaltung_cd").hover(
function () {
    $("#mainhexa1").show();
},
function () {
    $("#mainhexa1").hide();
}
);
于 2013-02-07T10:57:58.213 回答
0 
$("#gestaltung_cd").hover(function({
    $("#mainhexa1").css({ "visibility": "visible" });
}, function() {
    //Your hover out function
});
于 2013-02-07T10:58:05.520 回答
0

我建议您在前三个 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/GFFMR/

于 2013-02-07T10:58:42.027 回答
0

只是为了记录...

您可以只使用 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

于 2013-02-07T11:02:16.823 回答