CSS で hover 属性を使用すると応答がなくなる場合があるのはなぜですか? （例）-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS で hover 属性を使用すると応答がなくなる場合があるのはなぜですか? （例）

藏色散人

Aug 10, 2018 pm 05:24 PM

CSS でホバーを使用すると、無効な状況に遭遇することがありますが、これは非常に心配です。では、失敗の正確な原因は何でしょうか?この記事ではCSSでホバーが失敗する原因をまとめます。

CSS でのホバー使用の具体的なコード例は次のとおりです:

<style type="text/css">
	.one {
		margin: 0 auto;
		width: 400px;
		height: 300px;
		background: #ced05d;
	}
	.two {
		margin: 0 auto;
		width: 100px;
		height: 100px;
		background: #5a5aea;
	}
	.three {
		margin: 0 auto;
		width: 200px;
		height: 100px;
		background: #4b9c49;
	}
	.four {
		margin: 0 auto;
		width: 300px;
		height: 100px;
		background: #7b4141;
	}
	.one :hover {
		background: #da56d0;
	}
</style>
<body>
<h1 id="css中hover的用法测试">css中hover的用法测试</h1>
<div class="one">
	<div class="two">
	</div>
	<div class="three">	
	</div>
	<div class="four">	
	</div>
</div>
</body>

無効な理由の要約:

1. 上記のコードをテストすると、マウスがクラスを通過しても背景が変わらないことがわかりました。この変更により、:hover の前にスペースを追加しても :hover 自体の効果は得られませんが、子孫要素には :hover の効果があることがわかります。

2. 子孫要素と兄弟要素 (要素の直後の兄弟要素) のみが効果を持ちます。その他の :hover は無効になります

3. クラス名が間違っています

4. :hover が :link との間に置かれています。 :visited も以前は無効でした;

注:

:hover セレクターは、マウスポインターが浮いている要素を選択するために使用されます。

ヒント: :hover セレクターは、リンクだけでなくすべての要素で使用できます。

ヒント: :link セレクターは、訪問されていないページを指すリンクのスタイルを設定します。:visited セレクターは、訪問済みのページへのリンクを設定するために使用され、:active セレクターはアクティブなリンクに使用されます。 CSS 定義では、スタイルを有効にするには、:hover を :link および :visited (存在する場合) の後に置く必要があります。

以上がCSS で hover 属性を使用すると応答がなくなる場合があるのはなぜですか? （例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

非常に多くの色のリンクApr 13, 2025 am 11:36 AM

最近の色に関するツール、記事、リソースの実行がありました。あなたの楽しみのためにここにそれらを丸くすることで、私がいくつかのタブを閉じてもらいましょう。

FlexBoxでの自動マージンの仕組みApr 13, 2025 am 11:35 AM

ロビンは以前にこれをカバーしたことがありますが、私は過去数週間でそれについての混乱を聞いて、他の人がそれを説明することに刺されたのを見ました、そして私は望んでいました

動く虹色の下線Apr 13, 2025 am 11:27 AM

サンドイッチサイトのデザインが大好きです。多くの美しい特徴の中には、これらの見出しがあり、レインボーの下線が下線を描いて、スクロールするときに動きます。そうではありません

新年、新しい仕事？グリッド駆動の履歴書を作成しましょう！Apr 13, 2025 am 11:26 AM

多くの人気のある履歴書設計は、グリッド形状にセクションを配置することにより、利用可能なページスペースを最大限に活用しています。 CSSグリッドを使用して、レイアウトを作成しましょう

リロードしすぎるという習慣からユーザーを分解する1つの方法Apr 13, 2025 am 11:25 AM

ページのリロードは何かです。ページが反応しないと思われるとき、または新しいコンテンツが利用可能であると信じるときにページを更新することもあります。時々私たちはただ怒っています

Reactを使用したドメイン駆動型のデザインApr 13, 2025 am 11:22 AM

Reactの世界でフロントエンドアプリケーションを整理する方法に関するガイダンスはほとんどありません。（「正しいと感じる」までファイルを移動するだけです笑）。真実

非アクティブユーザーの検出Apr 13, 2025 am 11:08 AM

ほとんどの場合、ユーザーがアプリケーションに積極的に関与しているのか、一時的に非アクティブであるかを本当に気にしません。非アクティブ、意味、おそらく彼ら

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufooは常に統合に優れています。キャンペーンモニター、MailChimp、TypeKitなどの特定のアプリと統合されていますが、

See all articles

ホットAIツール

ホットツール

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

MinGW - Minimalist GNU for Windows

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

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。