ホームページ >ウェブフロントエンド >CSSチュートリアル >マウスホバー時に HTML の a タグの色を変更する方法と、CSS を使用して a タグのマウスホバースタイルを制御する方法
マウスホバー時に HTML の a タグの色を変更する方法と、CSS を使用して a タグのマウスホバースタイルを制御する方法
- 寻∝梦オリジナル
- 2018-09-07 13:38:1330446ブラウズ
この記事では主に、マウスホバー時に色を変更する html a タグ と、マウスオーバーを制御するためのその他の CSS スタイルについて説明します。詳細なチュートリアルの例が含まれているので、誰でも早く学習できるようになります。一緒にこの記事を見てみましょう
まず、マウスをホバーすると色が変わる HTML の a タグを見てみましょう。
HTML の a タグのマウスホバーの css 属性 については誰もが知っているはずです。はい、それが今日の話です。
:hover: これは、CSS スタイルについて話すために a タグを使用したときに前に述べました。マウスホバーにはさまざまな機能がありますが、今日はホバーすると色が変わるHTMLのaタグについて説明します。誰もがこれを頻繁に使用する必要があります。
最初に完全なコードの例を見てみましょう:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
.link_1:hover{color:pink;}
</style>
</head>
<body>
<a href="#" class="link_1">这里是PHP中文网</a>
</body>
</html>これは、link_1 の名前を定義する基本的なコードです。マウスを文字の上に置くと文字の色が変わる機能です。
Google Chrome の表示効果を見てみましょう:
ほら、これはマウスを置く前の効果です。次に、マウスを置いたときの効果を見てください:
これは、マウスを上に動かした結果です。設定したものとまったく同じですか?
マウス ホバーの変色効果について説明しました。次に、マウス ホバーの他の 3 つの効果について説明します。
:hover{font-size: 60px。 ;} マウスを上に動かすと大きくなります
:hover{text-decoration:underline;}マウスを上に動かすと下線が表示されます
:hover{background:#ccc;}マウスを動かす上に移動して背景色を変更します (:{background:#ccc ;}リンクは背景色で表示されます)
上で述べたように、マウスオーバーで多くのことができ、それらを一緒に表示するようになりました。 CSS スタイルについて詳しく知りたい場合は、PHP 中国語 Web サイトにアクセスしてください CSS 学習マニュアル コラム学習) 次に、コードと効果を見てみましょう
html a タグ CSS コントロール スタイルの完全なコード:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
.link_1:hover{color:pink;}
.link_2:hover{font-size:60px;}
.link_3:hover{background:red;}
</style>
</head>
<body>
<a href="#" class="link_1">这里是PHP中文网</a>
<a href="#" class="link_2">这里是PHP中文网</a>
<a href="#" class="link_3">这里是PHP中文网</a>
</body>
</html>As上では 3 つの CSS スタイル コードを設定しました。最初のコードは色を変更し、2 つ目はサイズを変更し、3 つ目は背景を変更します。
最初の効果を 1 つずつ見てみましょう。次に、2 番目の効果を直接見てみましょう。
3 番目の効果は、図に示すように、赤色を設定しているため、赤色の背景に変わります。 、赤い背景が表示されます。この影響は今でも非常に明白です。
上記は、この記事で HTML タグのマウスオーバーによる変色とその他のマウスオーバー スタイルについて話している内容です (CSS スタイルについて詳しく知りたい場合は、PHP 中国語 Web サイトにアクセスしてください
css学習マニュアルカラム学習）。ご質問がございましたら、以下よりお問い合わせください。 【編集者のおすすめ】
CSSで順序なしリストを設定するには？ cssのリストスタイルまとめcssを使って文字の背景色を設定するには？ CSSの背景カラーコードを詳しく解説以上がマウスホバー時に HTML の a タグの色を変更する方法と、CSS を使用して a タグのマウスホバースタイルを制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。