CSSを使用して、マウスが上に移動したときにフォントの色を変更するにはどうすればよいですか? (コードの実テスト)-CSSチュートリアル-php.cn

CSSを使用して、マウスが上に移動したときにフォントの色を変更するにはどうすればよいですか? (コードの実テスト)

藏色散人

リリース： 2018-08-09 15:22:20

オリジナル

15642 人が閲覧しました

Web を閲覧するときに、マウスがテキストの特定の段落を通過すると、変色効果が表示されます。これは、一方では、ユーザーのクリックを積極的に引き付けるためです。一方、ユーザーが誤って他のテキスト段落をクリックするのを防ぐためです。実際、この CSS マウスフォントの色を変更する効果は非常に簡単に実現できます。 cssの知識が少しあれば操作可能です。

主な知識点は、マウスホバーは CSS で HOVER と記述され、マウストリガーは CSS で ACTIVE と記述されるということです。

CSS マウスのフォント色の変更効果を実現する具体的なコード例は次のとおりです:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css字体变色测试</title>
</head>
<style>
    a {
        color:black}
    a:hover {
        color:red }
    a:active {
        color:blue}
</style>
<body>
<a>
    你过来指我试试！！！
</a>
</body>
</html>

ログイン後にコピー

上記のコードは直接コピーしてローカルでテストできます。

CSSを使用して、マウスが上に移動したときにフォントの色を変更するにはどうすればよいですか? (コードの実テスト)

注: a の後の color:red はリンクテキストが黒であることを意味し、a:hover の color:black はマウスがその上に移動した後のリンクテキストが赤になることを意味し、a の color:blue はリンクテキストが黒であることを意味します。 :active は、マウスのクリックを意味します。リンクテキストは青色です。

ということで、この記事が CSS マウスのフォントの色の変更効果を実現する方法について皆さんのお役に立てれば幸いです。

【おすすめ関連コンテンツ】

CSSの文字色（CSSカラー）について詳しく解説

HTMLとCSSの文字色設定関連まとめ

文字色と背景色の設定

CSS がテキストの色のグラデーションを実装する方法の例

以上がCSSを使用して、マウスが上に移動したときにフォントの色を変更するにはどうすればよいですか? (コードの実テスト)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。