CSS マウスホバー色の変更: マウスホバー時にハイパーリンクフォントの色が変わります-CSSチュートリアル-php.cn

CSS マウスホバー色の変更: マウスホバー時にハイパーリンクフォントの色が変わります

云罗郡主

リリース： 2018-11-22 17:31:31

転載

28734 人が閲覧しました

#この記事の内容は、CSS マウスホバーの色の変更に関するものです。ハイパーリンクのフォントはマウスホバーの色に応じて変化します。特定の参照値があります。困っている方は参考にしていただければ幸いです。

css は、ハイパーリンク上にマウスを置くと色が変わるようにフォントを設定し、マウスをハイパーリンク上に置くと色が変わるようにレイアウトを設定します。

マウスをフォント上に置くとテキストの色が変わります。通常、ハイパーリンクのアンカーテキストのフォント色の変更には、疑似クラス: hover が使用されます。

a{ color:#00F}
a:hover{ color:#F00}

ログイン後にコピー

説明: デフォルトのハイパーリンクのフォントの色は青「color:#00F」で、マウスがホバーしているときのフォントの色は赤「color:#F00」になります。マウスホバーの色を変更するには、a:hover

1、div CSS サンプルコード

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标悬停颜色改变 实例</title>
<style>
a{ color:#00F}/* 默认超链接字体颜色为蓝色 */
a:hover{color:#F00}/* 默认超链接字体悬停时颜色为红色 */
.zhiding a{ color:#090}
.zhiding a:hover{ color:#F0F}
</style>
</head>
<body>
<p>欢迎来到<a href="http://www.php.cn/">php</a>学习php技术！</p>
<p class="zhiding">指定对象<a href="#">超链接</a>字体悬停颜色改变！</p>
</body>
</html>

ログイン後にコピー

を設定するとわかります。効果は次のとおりです。

CSS マウスホバー色の変更: マウスホバー時にハイパーリンクフォントの色が変わります