画像上にマウスを置いた時のテキストをCSSで設定する方法-CSSチュートリアル-php.cn

画像上にマウスを置いた時のテキストをCSSで設定する方法

WBOY

リリース： 2021-11-15 18:00:43

オリジナル

17201 人が閲覧しました

画像上にマウスを置いたときに表示されるテキストを設定する Css メソッド: 1. テキスト要素に「display:none;」スタイルを追加して非表示にします; 2. 「親要素:hover」を使用します。 text element {display:block;} " ステートメントは、マウスを画像上に置いたときにテキストを表示する効果を実現します。

画像上にマウスを置いた時のテキストをCSSで設定する方法

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

画像上にマウスを置いたときに表示されるテキストを設定する CSS メソッド

とを使用します; 画像に表示されるテキストを定義します 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で設定する方法