ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS マウスオーバーで色を変える方法

CSS マウスオーバーで色を変える方法

WBOY
リリース: 2021-11-10 11:53:36
オリジナル
30303 人が閲覧しました

CSS では、ホバー セレクターと color 属性を使用して、マウスのホバー時に色を変更する効果を実現できます。ホバー セレクターは、マウス ポインターが浮いている要素を選択するために使用され、 color 属性はホバー時の色を設定するために使用されます。構文は「:hover{color:hover color;}」です。

CSS マウスオーバーで色を変える方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

マウスホバー時に CSS の色を変更する方法:

1. HTML 開発ツールを開き、HTML ファイルを作成します。

CSS マウスオーバーで色を変える方法

##2. HTML ページで タグを見つけ、 タグにコンテンツを入力し、 タグでコンテンツをカバーします。図に示すように:

CSS マウスオーバーで色を変える方法##3. 図に示すように、 タグの内容を変更し、色を青に設定します:

##4. マウスを タグ上にスライドすると、フォントが赤に変わるときのスタイルを設定します: a:hover{color:red}。図に示すように: CSS マウスオーバーで色を変える方法

5. HTML ファイルを保存し、ブラウザで開きます。最初に表示されるのは青いフォントです。テキストの上にマウスを置きます。青色が表示され、フォントが赤色に変わります。 CSS マウスオーバーで色を変える方法

CSS マウスオーバーで色を変える方法

6. 実装されているすべてのコードについて、コードを HTML ファイルに直接コピーして効果を確認します。 # #注: マウスがホバーしているときにスタイルを変更するには、ホバー セレクターを使用する必要があります。CSS マウスオーバーで色を変える方法

ホバー セレクターは、マウス ポインターが浮いている要素を選択するために使用されます。ホバー セレクターは、リンクだけでなくすべての要素で使用できます。 CSS 定義では、スタイルを有効にするには、ホバーをリンクの後に配置し、(存在する場合) アクセスする必要があります。

プログラミング関連の知識について詳しくは、

プログラミング ビデオ

をご覧ください。 !

以上がCSS マウスオーバーで色を変える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート