1

さて、ここに問題があります：

私はこれらの3つのDIVを持っています：

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

…そして、これらの3つのDIV –非表示（display：none;）–は、ページ上の完全に異なる位置にあります。

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

私がやりたいのは、「gestaltung_cd」にカーソルを合わせると「mainhexa1」が表示され、「gestaltung_illu」にカーソルを合わせると「mainhexa2」が表示されるようにするなどです。</ p>

ご覧のとおり、3つの非表示のDIVは、最初の3つのDIVの子要素ではありません...したがって、この場合、「：hover」は使用できません。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();
});

（nnnnnnの回答のように）クラスや別の属性など、オープナー要素とオープニング要素の間に何らかの関係がある方が簡単な場合があることに注意してください。

于 2013-02-07T10:57:19.110 に答える
0

これが最初の方法の例で、関連するIDを使用して他の2つについても同じことを行います。

$("#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を指定する属性を最初の3つの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()このようにして、メソッドを1回使用するだけで、ホバー時に表示/非表示を処理できます。

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

デモ： http： //jsfiddle.net/GFMQR/

于 2013-02-07T10:58:42.027 に答える
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

記録のために...

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 に答える