CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

要素に対する CSS :hover 効果の無効化:実践ガイド

:hover の削除 効果とは、ユーザーが要素の上にマウスを移動したときに要素の外観が変化しないようにすることを意味します。ホバー効果が不要、気が散る、またはページのデザインに適合しない場合は、この操作が必要になる場合があります。

CSS :hover 動作を削除する方法

:hover を無効にする効果的な方法がいくつかあります。 クリーンで一貫したスタイルを維持しながら、要素から得られる効果。

方法 1:ポインター イベントを使用する:なし

pointer-events: none プロパティは、ホバー効果を含むすべてのマウス操作を無効にします。これにより、要素がポインター イベントに応答できなくなります。 

<!DOCTYPE html>
<html>
<head>
<style>
 .button {
 background-color: #007bff;
 padding: 10px 20px;
 color: white;
 cursor: pointer;
 border: none;
 border-radius: 4px;
 margin: 5px;
 }
 .button:hover {
 background-color: #0056b3;
 }
 .no-hover {
 pointer-events: none;
 }
</style>
</head>
<body>
 <button class="button">Hover Active</button>
 <button class="button no-hover">Hover Disabled</button>
</body>
</html>

The first button changes to dark blue on hover, while the second button remains unchanged and cannot be clicked.

方法 2:! important でオーバーライドする

!important を使用します。 ホバー中に元のスタイルを強制的にアクティブのままにする宣言 

<!DOCTYPE html>
<html>
<head>
<style>
 .button {
 padding: 10px 20px;
 background-color: #28a745;
 color: white;
 border: none;
 border-radius: 4px;
 margin: 5px;
 cursor: pointer;
 }
 .button:hover {
 background-color: #218838;
 }
 .override-hover:hover {
 background-color: #28a745 !important;
 }
</style>
</head>
<body>
 <button class="button">Normal Hover</button>
 <button class="button override-hover">Override Hover</button>
</body>
</html>

The first button darkens on hover, while the second button maintains its original green color due to the !important override.

方法 3::not() 擬似クラスを使用する

:not() を使用して、特定のクラスを除くすべての要素にホバー効果を適用します。 セレクター

<!DOCTYPE html>
<html>
<head>
<style>
 .button {
 padding: 10px 20px;
 background-color: white;
 color: #3498db;
 border: 2px solid #3498db;
 border-radius: 4px;
 margin: 5px;
 cursor: pointer;
 }
 .button:not(.no-hover):hover {
 background-color: #3498db;
 color: white;
 }
</style>
</head>
<body>
 <button class="button">Hover Enabled</button>
 <button class="button no-hover">Hover Disabled</button>
</body>
</html>

The first button fills with blue background on hover, while the second button with the no-hover class remains unchanged.

方法 4:無効な状態を作成する

要素が非アクティブであることを視覚的に示し、ホバー効果を削除する無効なクラスを実装します。 

<!DOCTYPE html>
<html>
<head>
<style>
 .button {
 padding: 10px 20px;
 background-color: #007bff;
 color: white;
 border: none;
 border-radius: 4px;
 margin: 5px;
 cursor: pointer;
 }
 .button:hover {
 background-color: #0056b3;
 }
 .disabled {
 background-color: #6c757d;
 opacity: 0.6;
 cursor: not-allowed;
 }
 .disabled:hover {
 background-color: #6c757d;
 }
</style>
</head>
<body>
 <button class="button">Active Button</button>
 <button class="button disabled">Disabled Button</button>
</body>
</html>

The first button darkens on hover, while the disabled button appears grayed out with reduced opacity and shows a "not-allowed" cursor.

結論

これらのメソッドは、CSS ホバー効果を削除するための柔軟なソリューションを提供します。 pointer-events: none を使用してください インタラクションを完全にブロックするには、!important スタイルのオーバーライドの場合、:not() 選択的なアプリケーションの場合は、セマンティックな非アクティブ状態の場合は無効なクラスです。

要素に対する CSS :hover 効果の無効化:実践ガイド


No
  1. CSSでテキスト装飾の色を設定します

    テキスト装飾の色を設定するには、text-decoration-colorプロパティ-を使用します 例 <!DOCTYPE html> <html> <head> <style> .demo {    text-decoration: overline;    text-decoration-color: yellow; } </style> </head> <body> <h1>Examination Details</h1> <p cla

  2. CSS3を使用してオーバーフローテキストを壊す

    オーバーフローテキストを分割するには、word-wrapプロパティを使用して、値「break-word」に設定します。以下は、CSS3-を使用してオーバーフローテキストを分割する方法を表示するコードです。 例 <!DOCTYPE html> <html> <head> <style> div {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    border: 3px solid #3008c0; }