HTML上にマウスを置いたときにリンクのスタイルを変更する方法

HTML では、「:hover」擬似クラス セレクターを使用して、ラベル a をホバーしたときにそのスタイルを変更できます。「a:hover{属性:属性値}」を設定するだけです。 a要素。 「:hover」セレクターは、マウス ポインターが浮いている要素を選択し、対応するスタイルを要素に追加するために使用されます。

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

HTML で CCS スタイルを使用すると、マウスがハイパーリンク上を通過したときの色の変化を制御できます。レイヤーの文字色や背景色を変更できます。

具体例:

テキストの色を変更し、ID abc で新しい DIV を作成し、その DIV 内の

同時にテキスト (任意のテキスト) を書き込みます。同時に、次のように空の接続コードを作成します:

<div id="abc"><a href="#">文字</a></div>

同時に、テキストの CSS スタイルを定義します (テキストは黒色の宋朝です)。コードは次のとおりです:

<style type="text/css">
#abc {
    font-family: "宋体";
    color: #000000;
}
</style>

次に、マウスが通過したときのテキストの色を定義します (テキストは赤い Song フォントです)。コードは次のようになります。

<style type="text/css">
#abc {
    font-family: "宋体";
    color: #000000;
}
#abc a:hover {
    font-family: "宋体";
    color: #FF0000;
}
</style>

背景色を変更します。例 1 では、例の DIV 1 は高さと幅を 50 ピクセルとして定義し、背景はグレーです

同時に、 a タグも高さと幅を 50 ピクセルとして定義します。コードは次のとおりです:

<style type="text/css">
#abc {
    font-family: "宋体";
    color: #000000;
    background-color: #CCCCCC;
    height: 50px;
    width: 50px;
}
#abc a:hover {
    font-family: "宋体";
    color: #FF0000;
}
#abc a {
    background-color: #CCCCCC;
    display: block;
    height: 50px;
    width: 50px;
}
</style>

次に、マウスが通過したときに変化する色を定義します (色は青です) コードは次のとおりです:

<style type="text/css">
#abc {
    font-family: "宋体";
    color: #000000;
    background-color: #CCCCCC;
    height: 50px;
    width: 50px;
}
#abc a:hover {
    font-family: "宋体";
    color: #FF0000;
    background-color: #0066FF;
}
#abc a {
    background-color: #CCCCCC;
    display: block;
    height: 50px;
    width: 50px;
}
</style>

推奨される学習:

html ビデオ チュートリアル

以上がHTML上にマウスを置いたときにリンクのスタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。