ホバーが機能しない場合の対処方法
ホバーが機能しない場合の解決策: 1. ":hover" の前のスペースを確認して削除します; 2. 正しいクラス名を確認して変更します; 3. ":hover" が ":hover" に配置されているかどうかを確認しますlink」と「:visited」の場合は、場所を変更するだけです。
このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター。
CSS でのホバーが機能しない理由はいくつかあります:
1. set:hover:
前にスペースを追加します。たとえば、
<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>测试</h1>
<div class="one">
<div class="two">
</div>
<div class="three">
</div>
<div class="four">
</div>
</div>
</body>クラスが 1 つの場合、マウスの背景は変化しませんが、そのクラス内の他の div の背景色が変化することがわかります。
説明: ホバーの前にスペースを追加しても、:hover の効果はありません。子孫要素には次のような効果があります。 ホバー効果。
[推奨学習: css ビデオ チュートリアル ]
2. マウスが上を通過したら、他の要素のスタイルを変更します:
次の場所にあります。今回は子孫要素と兄弟要素(要素の直後の兄弟要素)のみが影響し、それ以外の:hoverは無効になります
3.クラス名の書き方が間違っています;
4。 : hover は :link および :visited の前に配置されます;
CSS 定義では、a:hover を有効にするには、a:link および a:visited の後に配置する必要があります。
CSS 定義で、a:active を有効にするには、a:hover の後に配置する必要があります。
以上がホバーが機能しない場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7496
15
1377
52
77
11
19
52
CSS ヒント: トランジションを使用してホバー状態を保持する
Sep 27, 2022 pm 02:01 PM
ホバー状態を保存するにはどうすればよいですか?以下の記事ではJavaScriptを使わずにホバー状態を保持する方法を紹介していますので、ご参考になれば幸いです。
体験は飛んでいます。Haval X1 カメラで飛行してみませんか
Jan 15, 2024 pm 02:21 PM
インターネット上では素晴らしいトップダウン動画がたくさん見られますが、ドローンで撮影された映像は確かに衝撃的ですが、実際にはドローンについての理解が浅い人が多いのが現状です。飛行が制限されている場所はどこですか?実際、すぐに飛行できる「ドローン」が現在の主流であり、多くの人が選択する価値のあるドローンです。今日は Harvest Flying Camera X1 を実際に体験していただきます。外観では、Harvest Flying Camera X1は初の折りたたみデザインを採用しており、カメラ全体の重さはわずか125gで、携帯電話よりも軽く、折りたたんだ後は手に持ってカバンに入れても圧迫感がありません。 。 4つの柔らかい染め葉と安全フレームの設計が撮影の安全を完全に保護します。 Dyed Leaf は、弾性が高く、耐久性があり、安全で環境に優しいバイオベースの生物学的基材を革新的に使用しており、離陸時と着陸時に手を保護する完全保護フレームも備えています。
CSSでホバーイベントを削除する方法
Feb 01, 2023 am 10:06 AM
CSS ホバー イベントを削除する方法: 1. "$("a").hover(function(){alert('mouseover'); }, function(){ 「alert('mouseout'); })」メソッドを使用してホバー イベントをバインドします。 2. 「$('a').off('mouseenter').unbind('mouseleave');」メソッドを使用してホバー イベントのバインドを解除します。できる。
HTMLにおけるホバーの役割
Feb 20, 2024 am 08:58 AM
HTML におけるホバーの役割と具体的なコード例 Web 開発では、ホバーとは、ユーザーが要素の上にカーソルを置いたときにいくつかのアクションや効果をトリガーすることを指します。これは、CSS :hover 疑似クラスを通じて実装されます。この記事ではホバーの役割と具体的なコード例を紹介します。まず、hover を使用すると、ユーザーが要素上にマウスを移動したときに要素のスタイルを変更できます。たとえば、ボタンの上にマウスを置くと、ボタンの背景色やテキストの色を変更して、次に何をすべきかをユーザーに思い出させることができます。
なぜホバーは擬似要素なのでしょうか?
Oct 09, 2023 pm 05:45 PM
Hover は擬似要素ではなく、擬似クラスです。疑似クラスは要素の特定の状態や動作を選択するために使用され、疑似要素は要素の特定の部分にスタイルを追加するために使用されます。 :hover は、要素の特定の部分にスタイルを追加するのではなく、要素の特定の状態を選択するために使用されるため、:hover 疑似クラスを使用して要素のマウスオーバー状態のスタイルを設定することができます。また、:hover を使用することもできます。リンクにホバー効果を追加する疑似クラス。リンク上にマウスを置くと、リンクの色、背景色などが変化します。
CSSでホバーを使う方法
Feb 23, 2024 pm 12:06 PM
CSS の hover 疑似クラスは、マウスが要素上にあるときに要素のスタイルを変更できるようにする非常に一般的に使用されるセレクターです。この記事では、ホバーの使い方を紹介し、具体的なコード例を示します。 1. 基本的な使用法 hover を使用するには、まず要素のスタイルを定義し、次に :hover 疑似クラスを使用して、マウスがホバーしているときに対応するスタイルを指定する必要があります。たとえば、ボタン要素があるとすると、ボタンの上にマウスを置くと、ボタンの背景色が赤に、テキストの色が白に変わります。
CSSでホバーを使う方法
Nov 24, 2023 am 10:32 AM
CSS では、:hover は、マウス ポインターが上にある要素を選択するために使用される疑似セレクターです。 :hover を使用すると、ユーザーが要素の上にマウスを移動したときにスタイルの変更を適用できます。
jQueryのhover()メソッドの使い方
Dec 04, 2023 am 09:56 AM
hover() は jQuery で一般的に使用されるメソッドです。2 つのイベント処理関数をバインドするために使用されます。これら 2 つの関数は、マウス ポインタが一致する要素に出入りするときに実行されます。基本的な使い方は「$(selector).hover(inFunction,outFunction);」です。
