マウスホバーで画像を切り替える方法をCSSで実装する方法-CSSチュートリアル-php.cn

マウスホバーで画像を切り替える方法をCSSで実装する方法

WBOY

リリース： 2021-11-18 09:31:06

オリジナル

11448 人が閲覧しました

CSS では、「:hover」疑似クラスセレクターと背景属性を使用して、マウスをホバーすることで画像を変更する効果を実現できます。構文は「画像要素:hover{background:url」です。 (マウスをホバーした後に画像を表示するパス)。);}"。

マウスホバーで画像を切り替える方法をCSSで実装する方法

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

css マウスホバーで画像が変更されます

CSS で :hover 疑似クラスを使用すると、この効果を実現できます。 :hover セレクターが使用されますマウスポインターを選択するには、上に浮かぶ要素を選択します。

ヒント: :hover セレクターは、リンクだけでなくすべての要素で使用できます。

ヒント: :link セレクターは、訪問されていないページを指すリンクのスタイルを設定します。:visited セレクターは、訪問済みのページへのリンクを設定するために使用され、:active セレクターは、訪問されていないページへのリンクを設定するために使用されます。アクティブなリンク。

注: スタイルを有効にするには、CSS 定義で :hover を :link および :visited (存在する場合) の後に配置する必要があります。

例で見てみましょう:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style type="text/css"> 
div{
    width:350px;
    height:250px;
    background:url(1118.01.png);
    }
div:hover{
    background:url(1118.02.png);
    }/*鼠标经过*/ 
</style> 
<body> 
<div> </div> 
</body>
</html>

ログイン後にコピー

マウスが画像上に置かれていない場合、出力結果は次のようになります:

マウスホバーで画像を切り替える方法をCSSで実装する方法