Webページポップアップ機能の実現方法interface_html/css

Webページポップアップ機能の実現方法interface_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:15:24

オリジナル

1136 人が閲覧しました

この投稿の最終編集者は yr1992 で、2012-10-04 10:47:23 です

最近 Web デザインを学び始めたところですが、Dreamweaver CS5 を使用して機能を実装したいと考えています: 「ホームページ」という単語でマウスが停止したとき、ポップアップウィンドウが表示されます。セーター、T シャツなど、さまざまなカテゴリがあります。マウスを動かすとウィンドウが消えます。ゲームに詳しい友人が説明してくれるので、よろしくお願いします。 you

ディスカッション（解決策）への返信

jsを使ってマウスイベントを登録して移動する divレイヤーを外に出すとdivレイヤーが表示され、外に出すとdivレイヤーが表示されない！

マウスが onmouseenter に移動するとレイヤーが表示され、マウスが onmouseleave の外に移動すると、このレイヤーは非表示になります。

これは、数学の問題の 1、2、3 と同じで、さらに分割すると小数になり、さらに難しくなります。
投稿者は、それについて学ぶための情報を見つける必要があります。学ばないだけでは道について議論するのに十分ではないし、学ばないだけでは道を聞くのに十分ではない。

:hover 属性を使用する場合は、JS を使用する方が良いです。 IE6 はサポートしていません

JS を使用してください

<!doctype html><html><body><div id='box' onMouseover="showDiv(true)" onMouseout="showDiv(false)"><input type=button value="TEST" /></div><div id="hiddenBox" style="width:200px;height:200px;background:#ABC;display:none;"><p>This is the content.</p></div><script>var obj = document.getElementById("hiddenBox");function showDiv(b){if(true==b){//showobj.style.display="block"}else{obj.style.display="none"}}</script></body></html>

ログイン後にコピー

投稿者は、リクエストに従ってざっくり書きました。は次のように希望する結果になります:

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>test</title>        <script>            window.onload = function(){                document.getElementById("test").onmouseover = function(){                    document.getElementById("liebiao").style.display = "block";                }                document.getElementById("test").onmouseout = function(){                    document.getElementById("liebiao").style.display = "none";                }                document.getElementById("liebiao").onmouseover = function(){                    document.getElementById("liebiao").style.display = "block";                }                document.getElementById("liebiao").onmouseout = function(){                    document.getElementById("liebiao").style.display = "none";                }            }        </script>        <style>            .manContent{                position: absolute;                top: 10px;                left: 200px;                width: 100px;                padding: 5px;                cursor: pointer;                border: 1px solid red;                text-align: center;            }            .manContent:hover{                background-color: #C0C0C0;            }            .funcContent{                position: absolute;                top: 40px;                left: 200px;                width: 110px;                display: none;                border: 1px solid red;            }            ul{                margin: 0;                padding: 0;            }            ul li{                list-style: none;                padding: 4px;            }            ul li a{                text-decoration: none;                color: #000;            }            ul li:hover{                background-color: blue;                cursor: pointer;            }        </style>    </head>    <body>        <div id="test" class="manContent" >首页</div>        <div id="liebiao" class="funcContent" >            <ul>                <li><a href="#">针织衣</a></li>                <li><a href="#">T恤</a></li>                <li><a href="#">羊毛衫</a></li>            </ul>        </div>    </body></html>

ログイン後にコピー