この記事では主に、マウスホバー時に色を変更する 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 サイトの他の関連記事を参照してください。
CSSグリッドとは何ですか？Apr 30, 2025 pm 03:21 PMCSSグリッドは、複雑で応答性の高いWebレイアウトを作成するための強力なツールです。設計を簡素化し、アクセシビリティを向上させ、古い方法よりも多くの制御を提供します。
CSS Flexboxとは何ですか？Apr 30, 2025 pm 03:20 PM記事では、レスポンシブデザインにおけるスペースの効率的なアラインメントと分布のためのレイアウト方法であるCSS FlexBoxについて説明します。 FlexBoxの使用量を説明し、CSSグリッドと比較し、ブラウザのサポートを詳細に説明します。
CSSを使用してWebサイトを応答するにはどうすればよいですか？Apr 30, 2025 pm 03:19 PMこの記事では、ビューポートメタタグ、柔軟なグリッド、流体メディア、メディアクエリ、相対ユニットなど、CSSを使用してレスポンシブWebサイトを作成するための手法について説明します。また、CSSグリッドとフレックスボックスを使用してカバーし、CSSフレームワークを推奨しています
CSSボックスサイズのプロパティは何をしますか？Apr 30, 2025 pm 03:18 PMこの記事では、要素の寸法の計算方法を制御するCSSボックスサイズのプロパティについて説明します。コンテンツボックス、ボーダーボックス、パディングボックスなどの値と、レイアウト設計とフォームアライメントへの影響について説明します。
CSSを使用してアニメーション化するにはどうすればよいですか？Apr 30, 2025 pm 03:17 PM記事では、CSS、キープロパティ、およびJavaScriptとの組み合わせを使用してアニメーションの作成について説明します。主な問題は、ブラウザの互換性です。
CSSを使用してプロジェクトに3D変換を追加できますか？Apr 30, 2025 pm 03:16 PM記事では、3D変換、主要なプロパティ、ブラウザの互換性、およびWebプロジェクトのパフォーマンスに関する考慮事項にCSSを使用して説明します。
CSSに勾配を追加するにはどうすればよいですか？Apr 30, 2025 pm 03:15 PMこの記事では、CSSグラデーション（線形、放射状、繰り返し）を使用して、ウェブサイトのビジュアルを強化し、深さ、フォーカス、および現代の美学を追加します。
CSSの擬似要素とは何ですか？Apr 30, 2025 pm 03:14 PM記事では、CSSの擬似要素、HTMLスタイリングの強化における使用、および擬似クラスとの違いについて説明します。実用的な例を提供します。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
メモ帳++7.3.1
使いやすく無料のコードエディター
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
ドリームウィーバー CS6
ビジュアル Web 開発ツール
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
ホットトピック
7921
15165214141152130325124829