ホームページ > 記事 > ウェブフロントエンド > 画像上にマウスを置いた時のテキストをCSSで設定する方法
画像上にマウスを置いた時のテキストをCSSで設定する方法
- WBOYオリジナル
- 2021-11-15 18:00:4317189ブラウズ
画像上にマウスを置いたときに表示されるテキストを設定する Css メソッド: 1. テキスト要素に「display:none;」スタイルを追加して非表示にします; 2. 「親要素:hover」を使用します。 text element {display:block;} " ステートメントは、マウスを画像上に置いたときにテキストを表示する効果を実現します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
画像上にマウスを置いたときに表示されるテキストを設定する CSS メソッド
1.
と を使用します; 画像に表示されるテキストを定義します HTML 要素に表示されるテキストは、
と で組み合わせることができます。
コードは次のとおりです:
<div> <span>这是要在图片上出现的文字</span> </div>
2. div 要素に背景画像を追加してサイズを設定し、テキスト要素のスパンに「display:none;」スタイルを追加します。
background-image:url(图片名称); width:250px; height:100px; background-position:center;
display:none; text-decoration:none;
3. マウスを画像上に置いたときにテキストが表示されるようにするには、ホバー セレクターを使用します。コードは次のとおりです。
<!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>
<style type="text/css" >
.a{
background-image:url(1115.08.png);
width:250px;
height:100px;
background-position:center;
}
.a span{
display:none;
text-decoration:none;}
.a:hover span{
display:block;
position:absolute;
top:0;
left:0;
color:blue;}
</style>
</head>
<body>
<div class="a">
<span>这是一副山水画</span>
</div>
</body>
</html>rrreeeマウスが画像上にない場合の結果を出力します:
マウスが画像上にある場合:
プログラミング ビデオをご覧ください。 ！
以上が画像上にマウスを置いた時のテキストをCSSで設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。