onmouseover onmouseout イベント問題_html/css_WEB-ITnose-htmlチュートリアル-php.cn

onmouseover onmouseout イベント問題_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:23:39

オリジナル

1459 人が閲覧しました

onmouseover

カーソルを DIV1 に移動すると DIV2 が表示され、離れると非表示になります。もちろん、カーソルが DIV2 にあるときは、DIV も表示されるはずです。

問題は、DIV2 にドロップダウンボックスがあることです。ドロップダウンボックスをクリックしてその中のオプションを選択すると、DIV2 が消えてしまいます。

保存方法は？

ディスカッションへの返信 (解決策)

補足のデモコードは次のとおりです:

<html><head><title></title></head><body>    <div onmouseover="ShowDiv()" onmouseout="HideDiv()">        鼠标移到这里显示另一个DIV    </div>    <div id="div2" style="width:200px;height:200px;border:1px solid #f00;display:none;" onmouseover="ShowDiv()" onmouseout="HideDiv()">         <select>            <option>1</option>            <option>2</option>            <option>3</option>        </select>           随便写一些内容        <br />        这里是需要显示的DIV    </div></body><script type="text/javascript">    function ShowDiv() {        document.getElementById('div2').style.display = 'block';    }    function HideDiv() {        document.getElementById('div2').style.display = 'none';    }</script></html>

ログイン後にコピー

DIV2 は DIV1 の外側にあります。もちろん非表示になります。DIV1 の上に DIV2 をカバーする必要があります。

DIV2 は DIV1 の外側にあるので、当然、DIV1 の上に DIV2 を隠す必要があります。

これは DIV1 とは関係ないと思います。DIV1 は DIV2 の表示をトリガーするだけです

重要なのは、DIV2 のドロップダウンボックスをクリックした後、カーソルが DIV2 の外に移動したように見えるため、トリガーされることです。 DIV2のonmouseoutなので非表示になりました。

div レイアウトによれば、2 番目の div が最初の div の下に表示されていることにお気づきでしょうか。

div レイアウトによれば、2 番目の div が最初の div の下に表示されていることにお気づきでしょうか。

はい、どこに表示されるかは問題ではありません。これは問題を説明するための単なるデモです。カーソルを DIV2 に移動すると、DIV2 は表示されたままになりますが、DIV2 内のドロップダウンボックスをクリックすると非表示になります。

    <div onmouseover="ShowDiv()" onmouseout="HideDiv(event)">        鼠标移到这里显示另一个DIV    </div>    <div id="div2" style="width:200px;height:200px;border:1px solid #f00;display:none;" onmouseover="ShowDiv()" onmouseout="HideDiv(event)">         <select>            <option>1</option>            <option>2</option>            <option>3</option>        </select>           随便写一些内容        <br />        这里是需要显示的DIV    </div></body><script type="text/javascript">    function ShowDiv() {        document.getElementById('div2').style.display = 'block';    }     function HideDiv(e) {		var e = e || window.event;        var tg = e.target || e.srcElement;        if(tg.tagName == "DIV"){              document.getElementById('div2').style.display = 'none';        }     }	</script>

ログイン後にコピー

オプションのマウスアウトは、親コンテナのマウスアウトイベントをトリガーします。

    <div onmouseover="ShowDiv()" onmouseout="HideDiv(event)">        鼠标移到这里显示另一个DIV    </div>    <div id="div2" style="width:200px;height:200px;border:1px solid #f00;display:none;" onmouseover="ShowDiv()" onmouseout="HideDiv(event)">         <select>            <option>1</option>            <option>2</option>            <option>3</option>        </select>           随便写一些内容        <br />        这里是需要显示的DIV    </div></body><script type="text/javascript">    function ShowDiv() {        document.getElementById('div2').style.display = 'block';    }     function HideDiv(e) {		var e = e || window.event;        var tg = e.target || e.srcElement;        if(tg.tagName == "DIV"){              document.getElementById('div2').style.display = 'none';        }     }	</script>

ログイン後にコピー

オプションのマウスアウトは、親コンテナのマウスアウトイベントをトリガーします。

はい、どうやって解決しますか？

そうですね、何を言っているのかわかりません。試してみましたが、ドロップダウンボックス DIV2 をクリックしても消えませんでした。どうやってやったのかわかりませんが、div に従って実行しました。レイアウト。div2 が div1 の下にあるため、div2 が非表示になります。うーん、意味がわかりません。試してみましたが、DIV2 が消えませんでした。div2 が div1 の下にあるため、マウスが div2 に入ることができません。 div2 は非表示になります。どうすればドロップダウンボックスをクリックできますか?どういう意味ですか。ドロップダウンボックスをクリックしてもDIV2が消えませんでした。div2がdiv1の下にあるため、マウスがdiv2に入ることができません。 . div1 を削除すると、div2 が非表示になります

矛盾していませんか?また、DIV2 のドロップダウンボックスをクリックしても DIV2 が消えないとも言われ、マウスが DIV2 に入れない場合は、どうやってドロップダウンボックスをクリックしましたか?

ドロップダウンボックスをクリックする代わりに、ドロップダウンボックスをクリックして他のオプションに移動します。

矛盾してませんか？また、DIV2 のドロップダウンボックスをクリックしても DIV2 が消えず、マウスが DIV2 に入れない場合はどうやってドロップダウンボックスをクリックしたのでしょうか?

ドロップダウンボックスをクリックする代わりに、ドロップダウンボックスをクリックして他のオプションに移動します。
div1 の中に div2 を入れただけです

矛盾していませんか?また、DIV2 のドロップダウンボックスをクリックしても DIV2 が消えず、マウスが DIV2 に入れない場合はどうやってドロップダウンボックスをクリックしたのでしょうか?

ドロップダウンボックスをクリックする代わりに、ドロップダウンボックスをクリックして他のオプションに移動します。
div1 の中に div2 を入れただけです

ブラウザの互換性の問題である可能性があります。IE8 を使用していますが、その下に DIV2 を入れても問題ありません

xiaofanku が述べた解決策のように、問題は解決しました、ありがとう