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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:15 PM

この投稿の最終編集者は 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>

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。