ホームページ ウェブフロントエンド CSSチュートリアル IEにおける疑似クラスホバーとBUGの使用について

IEにおける疑似クラスホバーとBUGの使用について

Jun 21, 2018 pm 05:40 PM
bug

この記事は主に IE の疑似ホバーの使用方法とバグを紹介します。これは、必要な友達に共有します。必要な友達が参照できます。

擬似クラス:hover のルール:

CSS1 では、この擬似クラスはオブジェクトに対してのみ使用できます。そして、href 属性のないオブジェクトの場合、この疑似クラスは効果がありません。

CSS2 では、この疑似クラスはどのオブジェクトにも適用できます。
現在、IE5.5 と IE6 は CSS1 でのみサポートしていますが、新しい IE7 ではFirefox は CSS2 の :hover をサポートします。
最初に CSS2 記述メソッドを使用して実装します。

<html> 
<head> 
<style> 
* {margin:0; padding:0;} 
ul {list-style:none;margin:100px;} 
li {height:100px; width:100px; background:#000; font-size:12px; color:#fff; position:relative;} 
li a {display:none;} 
li:hover a{display:block; text-decoration:none;width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff;} 
</style> 
</head> 
<body> 
<ul> 
<li>鼠标移过来触发我吧!<a href="#" title="">哈哈,终于被你发现了!</a></li> 
</ul> 
</body> 
</html>
ログイン後にコピー

ヒント: 実行する前にコードの一部を変更できます

CSS2 を適切にサポートしている Firefox などのブラウザでテストして確認できます。効果を表示できますが、IE6では実現できません。

発想を変えて、CSS1の書き方を使って見てみましょう:

CSS1では、li要素:hoverの使用がサポートされていないため、テキストはaに含まれ、aには:hoverが使用され、それは部分をspan要素に入れます。
CSSでは、aをブロックレベルの要素として設定し、aのサイズと幅をliと同じにします。そして、aを相対位置に設定します。上記の例で li をシミュレートするには a を使用します。
上記の例で a をシミュレートするには、span を使用します (display:none;)。
a がトリガーされると (:hover)、span が表示されます。 (display:block;);
しかし、上記の方法で変更しても、例の効果は依然として IE6 では表示できません。
その理由は、IE ブラウザ自体の解析の問題は、IE5.5 および IE6 の pseudo-class:hover のバグであるためです。
この問題を解決するにはどうすればよいですか?
このバグは、リンク属性に特別な CSS 属性宣言を追加することで解消できます。
li a:hover {}
その属性に width:100px を設定しただけですが、IE6 ではまだ変更がないことがわかり、width:99px にするなど、width の値を変更しようとしましたが、何か奇妙なことが起こりました。 IE6 では、トリガーされると隠れた部分が表示されます。次に、li a:hover の属性に color のみを設定してテストし (初期値は #fff)、color 値を変更したところ、IE6 では表示がトリガーされないことがわかりました。 。 。
最後に、表示をトリガーできない text-decoration、color、z-index (表示をトリガーできない部分に欠落している属性がある可能性があります) を除いて、他の属性を使用して疑似クラスを排除できることがわかりました。ホバー特定の属性。
注:
1. このバグを解消するために特定の属性として表示値を変更することはお勧めできません。場合によっては、この属性ではバグを解消できない場合があります。
2. 特定の属性である境界線と背景の色については、バグを排除するために、完全な文字と省略形を使用して変更することもできます。
CSS1 記述法の最終的な効果:

<html> 
<head> 
<style> 
* {margin:0; padding:0;} 
ul {list-style:none;margin:100px;} 
li {height:100px; width:100px; background:#000; font-size:12px; } 
li a {display:block; height:100px; width:100px; position:relative; color:#fff; text-decoration:none;} 
li a:hover {background:#ccc;} 
li span {display:none; } 
li a:hover span {display:block; width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff; } 
</style> 
</head> 
<body> 
<ul> 
<li><a href="#" title="">鼠标移过来触发我吧!<span>哈哈,终于被你发现</span></a></li> 
</ul> 
</body> 
</html>
ログイン後にコピー

ヒント: 実行前にコードの一部を変更できます

最小コード実装バージョン (xugag 実装):

<html> 
<head> 
<style> 
li {height:10px; width:120px; background:#000;} 
li a{height:10px; width:120px; display:block;} 
li a:hover {background:#ccc;} 
li span {display:none;} 
li a:hover span {display:block; width:100px; height:40px; background:#c00; position:absolute; top:15px; left:180px;} 
</style> 
</head> 
<body> 
<ul> 
<li> 
<a href="#" title="">鼠标移过来触发 
<span> 
<ul> 
<li>aaa</li> 
<li>aaa</li> 
</ul> 
</span> 
</a> 
</li> 
</ul> 
</body> 
</html>
ログイン後にコピー

ヒント: 実行前にコードの一部を変更できます

以上です。この記事の内容全体が皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

IE で CSS3 のボックスシャドウの効果をシミュレートする


以上がIEにおける疑似クラスホバーとBUGの使用についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

ゲームのバグってどういう意味ですか? ゲームのバグってどういう意味ですか? Feb 18, 2024 am 11:30 AM

ゲームのバグとは何ですか? ゲームのプレイ中に、キャラクターが動かなくなったり、タスクが続行できなくなったり、画面がちらついたりするなど、予期せぬエラーや問題が発生することがよくあります。このような異常現象をゲームバグ、つまりゲーム上の不具合やエラーと呼びます。この記事では、ゲームのバグが何を意味し、それがプレイヤーや開発者に与える影響について探っていきます。ゲームのバグとは、ゲームの開発または運用中に発生し、ゲームが正常に実行できなくなったり、予期しない動作を引き起こしたりするエラーを指します。これらのエラーの原因として考えられるのは、

Apple iOS18 のバグの概要 Apple iOS18 のバグの概要 Jun 14, 2024 pm 01:48 PM

Apple の WWDC カンファレンス 2024 が成功裡に終了する中、macos15 が発表されただけでなく、Apple の新しい iOS18 システムのアップデートが最も注目を集めました。Apple の iOS18 の最初のバージョンとして、多くの新機能がありますが、人々は必然的にそれがどうか疑問に思います。 Apple iOS18 にアップグレードする必要がありますが、Apple iOS18 の最新リリースにはどのようなバグがありますか?実際の使用評価の後、以下に Apple iOS 18 のバグの概要を示しますので、見てみましょう。現在、多くのiPhoneユーザーがiOS18へのアップグレードを急いでいますが、さまざまなシステムバグが人々を不快にさせています。一部のブロガーは、「バグが非常に多い」ため、iOS18にアップグレードする場合は注意する必要があると述べています。ブロガーは、あなたのiPhoneが

システム手荷物とはどういう意味ですか? システム手荷物とはどういう意味ですか? Nov 09, 2022 pm 02:40 PM

システムバゲージとはシステムのバグのことを指しますが、バグの本来の意味は「バグ」ですが、現在ではシステムのセキュリティポリシーに不備があり、コンピュータに存在する脆弱性を指す言葉として使われるようになりました。攻撃者が許可なくアクセスできる広義の危険 このトピックに関しては、バグはさまざまな分野に現れる抜け穴や欠陥を説明するために使用できます。

Win11 のエラーと問題を整理する Win11 のエラーと問題を整理する Jan 13, 2024 pm 08:21 PM

win11 にアップデートしたいけど、win11 にバグが多いのか、アップデートで問題が発生するのか分からないという人もいますが、実際、win11 には現在バグがありますが、使用にはほとんど影響がありません。 win11 には多くのバグがありますか? 回答: win11 にはまだ多くのバグがあります。ただし、これらのバグは日常の使用にはほとんど影響しません。ユーザーの日常使用に対する要求が高い場合は、後で使用することをお勧めします。 win11 のバグの概要 1. リソース マネージャー 1. メモリ オーバーフローが発生し、リソース マネージャーのメモリ使用量が高くなる場合があります。 2. この状況ではメモリが 70% 以上を占有し、コンピュータがフリーズしたりクラッシュしたりすることがあります。 2. 競合とクラッシュ 1. 一部のアプリケーションには互換性が不十分であり、相互に競合が発生します。 2.紛争手続きは比較的少ないですが、

バグのライフサイクルは何ですか? バグのライフサイクルは何ですか? Nov 08, 2022 pm 02:17 PM

BUG のライフサイクルとは、BUG が発見されてから BUG がクローズされるまでのプロセスであり、具体的なプロセスは次のとおりです: 1. BUG の発見、つまりソフトウェア プログラムの抜け穴や欠陥を発見します。バグを提出し、欠陥の属性と再現性を説明してください。環境、種類、レベル、優先順位と詳細な再現手順、結果と予想など。 3. バグを割り当てる、つまり、問題を対応する担当者に直接割り当てます。開発者; 4. 分析して欠陥として確認する; 5. BUG を処理して修正する; 6. 回帰検証 BUG; 7. BUG を閉じる。

インターネットのホットワードバグとは何を意味しますか? インターネットのホットワードバグとは何を意味しますか? Jan 21, 2021 pm 02:15 PM

インターネットのホットワードバグとは、コンピュータに存在する抜け穴を指します。脆弱性* (バグ) は、ハードウェア、ソフトウェア、プロトコル、またはシステム セキュリティ ポリシーの特定の実装における欠陥であり、攻撃者が許可なくシステムにアクセスしたり、システムに損害を与えたりすることを可能にします。脆弱性は、アプリケーション ソフトウェアやオペレーティング システムの設計上の欠陥やコーディング上のエラーによって発生する場合もあれば、設計上の欠陥やビジネス インタラクション プロセスにおける不合理なロジック フローによって発生する場合もあります。

win10 1903の最新バージョンのバグは何ですか win10 1903の最新バージョンのバグは何ですか Jan 07, 2024 pm 10:37 PM

Microsoft が wi​​n101903 バージョンを更新した後、新しいバージョンでは前のバージョンで発生したバグが修正され、いくつかの機能が追加および改善されただけでなく、新しいバージョンに存在していた問題も必然的に発生しました。それらのほとんどは互換性と安定性に関連するバグですが、幸いなことに大きな問題ではありません。編集者と一緒に具体的な内容を見ていきましょう~お役に立てれば幸いです。最新バージョンの win10 のバグ 1903 とは何ですか? Microsoft は、Windows 10 2019 May Update で 3 つの重大なバグ 1 を修正したことを発表しました。1 つ目は、ドルビー アトモスとホーム シアターのオーディオの問題です。一部のデバイスでは、バージョン 1903 のインストール後に音声が失われる場合があります。この音声バグは

Python のバグを固有のものにする 1 行のコード Python のバグを固有のものにする 1 行のコード Apr 14, 2023 am 09:16 AM

PrettyErrors は Python のエラー メッセージを効率化するツールで、非常にシンプルでフレンドリーなインターフェイスが特徴です。その最も注目すべき機能は、端末上でのカラー出力のサポート、ファイル スタック トレースへの注釈付け、エラー メッセージの検索、冗長な情報のフィルタリング、重要な部分の抽出、およびカラー注釈の実行により、開発者の効率を向上させることです。コードを書くこと自体は簡単なことではなく、特に数万行のコードの中にバグが現れると、しばらく問題を見つけることができなくなり、この時は非常に頭がおかしくなってイライラしているはずです。特に Python コードにエラーがあると、画面がエラー メッセージでいっぱいになり、エラーを見つけるのがさらに難しくなります。まず上記のトレースバックを見てみましょう。これは 1 色しかなく、コードほど高レベルではありません。

See all articles