Test</div> <div id="example1" style="display:none;">Test</div> <div id="example2" style="display:none;">Test</div> #test"> Test</div> <div id="example1" style="display:none;">Test</div> <div id="example2" style="display:none;">Test</div> #test"> Test</div> <div id="example1" style="display:none;">Test</div> <div id="example2" style="display:none;">Test</div> #test" />

ホバーオーバーに含まれる要素の変更要素にカーソルを置きます

タイトルの表現を間違えてはいますが、要約するのは一種難しかったです。

これは私がやりたいことです

<div id="test">Test</div>
<div id="example1" style="display:none;">Test</div>
<div id="example2" style="display:none;">Test</div>

#test をホバーすると、#example1 #exmaple2 が表示され、/code>と#exmaple2 は再び非表示に戻ります。

明らかに単純なコード。

$('#test').hover(
  function() {
    $('#example1,#example2').show();
  }, 
  function() {
   $('#example1,#example2').hide();
  }
);

今ここにジレンマがあります。マウスを動かすと #test を離れると表示されないので、これは不可能です。#example1 #exmaple2 #example1 または#example2 を選択すると、上のコードで指示されているとおり、それらは非表示に戻ります。どうすればこれを可能にすることができますか?

私はこのような要素をまとめることを理解しています

<div id="wrapper">
 <div id="test">Test</div>
 <div id="example1" style="display:none;">Test</div>
 <div id="example2" style="display:none;">Test</div>
</div>

コードを次のように変更します

$('#wrapper').hover(
  function() {
    $('#example1,#example2').show();
  }, 
  function() {
   $('#example1,#example2').hide();
  }
);

これを修正しますが、実際のコードでは #test が既にラッパーの下にあるため、これを行うことはできません。私はそれに#example1 #example2 を含めました。

上記をまとめると、私の質問があります: #test を上に置いて#example1 #example2 を見ると、 #test1 #example1 および#example2にカーソルを置いても#example1 #example2

0

2 答え

これは仕事をしない?

$('#test').hover(
  function() {
    $('#example1,#example2').show();
  }
  , function() {
    $('#example1,#example2').hide();
  }
);

次に、高さの問題を解決するためにこのようなものにあなたのHTMLを変更します。

<div id="test">
Test
<div id="example1" style="display:none;z-index:256;">Test</div>
<div id="example2" style="display:none;z-index:256;">Test</div>
</div>
0
追加された
@オージーシー私はソリューションの残りの半分を追加しました。
追加された 著者 shinkou,
上で述べたように、コード内の別のラッパーに既に #test があるので、高さに応じて#example1 #example2 それを台無しにする。私は、コード全体をやり直す前にjQueryやJavaScriptでそれを行う方法があるかどうかを確認しようとしています。
追加された 著者 Odyssey,
これは私の必要と同じように動作する position:absolute margin-top という考えを私に与えました!
追加された 著者 Odyssey,

どのようにmousenterとmouseleaveを使用するのですか?

EDIT ... 要素を含めることができます

$('#test,#example1,#example2').hover(

function() {
    $('#example1,#example2').show();
}, function() {
    $('#example1,#example2').hide();
});
0
追加された
追加された 著者 pixelass,
mouseenter mouseleave は基本的にjQueryで .hover であり、私の元のジレンマに戻ります。 #test 、#example1 #example2
追加された 著者 Odyssey,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript