0

ホバーすると、関連する追加のメニューが項目の横に表示され、マウス ポインターが消えると消えるメニュー バーを作成したいと考えています。

たとえば、このページの上部にあるユーザー名にマウス ポインターを置くと、アクティビティ、権限、ログアウトなどを含むメニューが表示されます。

そんなメニューを実現したい。

余分なメニュー要素 (div など) の可視性を切り替える (または表示を変更する) 属性は明らかです。

しかし、私の問題は、マウスポインターが追加メニューの上にあることをどのように検出できるかであり、マウスポインターが消えるまで消えてはなりません!

JQuery を使用したくありません。

4

6 に答える 6

1

以下を使用して、POP アップ メニューを表示できます。これを好きなように再構築するためにやりたいことはすべてです。ここでデモを行うことができます。

HTML

    <div>
 <input type="button" ID="lnkModel"  OnClick="DisplayModal();" Text="OK" />
    </div>
    <div id="overlay"></div>
    <div id="modalMsg" style="width: 200px; height: 100px; border-color: Black; border-style: solid;
        color: Red;" class="HideModal">
        This is modalpopup window
        <input type="button" ID="lnkOk"  OnClick="return RemoveModal();" Text="OK" />
    </div>

CSS

.ShowModal
 {
                top: 200px;
                left: 250px;
                z-index: 1000;
                position: absolute;
                background-color: White;
                display: block;
            }
            .HideModal
            {
                display: none;
            }
            .OverlayEffect
            {
                background-color: black;
                filter: alpha(opacity=70);
                opacity: 0.7;
                width: 100%;
                height: 100%;
                z-index: 400;
                position: absolute;
                top: 0;
                left: 0;
            }

JavaScript

function DisplayModal()
            {
                alert("Hai");
                document.getElementById("overlay").style.height = document.body.clientHeight + 'px';
                document.getElementById("overlay").className = "OverlayEffect";
                document.getElementById("modalMsg").className = "ShowModal";
            }
            function RemoveModal()
            {
                document.getElementById("modalMsg").className = "HideModal";        
                document.getElementById("overlay").className = "";
                return false;
            }

アップデート

この質問に従って、この方法を使用してホバーをトリガーできます

<div onmouseover="document.getElementById('input').style.backgroundColor='Blue';">
<input id="input">
</div>

css と js のホバー イベントの違いについて詳しくは、この質問をご覧ください。上記のcss hover と javascript マウスオーバーの質問)。

于 2013-07-23T11:28:17.937 に答える
0

この種のものにはjQueryを使用することをお勧めしますが、ホバーの問題の解決策は次のとおりです。

メニューとユーザー名のマウス イベントにアニメーションを追加します。

 var elem =  getelementbyid("yourTrigger");
 var elem2 = getelementbyid("yourElementToShow");
 elem.onmouseover = function(e) {
        elem2.style.display = "block";
    };
    elem.onmouseout = function(e) {
        elem2.style.display = "none";
    };
    elem2.onmouseover = function(e) {
        elem2.style.display = "block";
    };
    elem2.onmouseout = function(e) {
        elem2.style.display = "none";
    };
于 2013-07-23T11:07:40.393 に答える
0

皆さんの助けとアイデアに感謝します。

私は問題を解決したと思います：

最初に、幅と高さの属性が固定されたシンプルなものを作成しました。

<div id="menu" style="width:200px; height:50px; overflow:visible;">

</div>

次に 、メニュー DIV の中に別のINSIDEを追加しました!

ここでは相対位置を使用して z-index 属性を使用しています。（絶対位置でもOKです。）

left 属性により、サブメニューが正しい位置に表示されます。

表示属性は none に設定されています。JavaScript コードで変更すると、DIV が表示されます。

<div id="menu" style="width:200px; height:50px; overflow:visible;">
    <div id="sub-menu" style="width:200px; height:300px; position:relative; left:200px; display:none">
        ... items in sub-menu
    </div>
</div>

その後、 MouseOver と MouseOut の 2 つの JavaScript 関数を追加しました。

<div id="menu" style="width:200px; height:50px; overflow:visible;" onmouseover="javascript: MouseOver();" onmouseout="javascript: MouseOut();">
    <div id="sub-menu" style="width:200px; height:300px; position:relative; left:200px; display:none">
        ... items in sub-menu
    </div>
</div>

Javascript:

function MouseOver(){
    document.getElementById("sub-menu").style.display = "inline-block";
}

function MouseOut(){
    document.getElementById("sub-menu").style.display = "none";
}

このように、マウス ポインターがメニュー DIV の上に移動すると、サブメニュー DIV が表示され、マウス ポインターがサブメニュー DIV を通過すると、それはメニュー DIV の上にもあるため、MouseOut 関数は呼び出されません。

トリックは、サブメニュー DIV をメイン メニュー DIV の内側に追加し、相対位置を使用することでした。表示属性の変更は明らかでした;）

説明が悪くてすみません。ありがとう。

于 2013-08-12T11:32:26.263 に答える