ホームページ > 記事 > ウェブフロントエンド > マウスホバーで画像を切り替える方法をCSSで実装する方法
マウスホバーで画像を切り替える方法をCSSで実装する方法
- WBOYオリジナル
- 2021-11-18 09:31:0611522ブラウズ
CSS では、「:hover」疑似クラス セレクターと背景属性を使用して、マウスをホバーすることで画像を変更する効果を実現できます。構文は「画像要素:hover{background:url」です。 (マウスをホバーした後に画像を表示するパス)。);}"。
このチュートリアルの動作環境: 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>マウスが画像上に置かれていない場合、出力結果は次のようになります:
When 画像上にマウスを置くと、出力結果は次のようになります。
プログラミング ビデオをご覧ください。 ！
以上がマウスホバーで画像を切り替える方法をCSSで実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。