So legen Sie den Text in CSS fest, wenn die Maus auf dem Bild platziert wird

Css-Methode, um den Text so festzulegen, dass er angezeigt wird, wenn die Maus auf dem Bild platziert wird: 1. Fügen Sie dem Textelement den Stil „display:none;“ hinzu, um ihn auszublenden. 2. Verwenden Sie den „parent element: hover text element;“ display:block;}"-Anweisung zum Implementieren der Maus Der Effekt der Anzeige von Text auf dem Bild.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

So legen Sie den Text fest, der auf dem Bild angezeigt werden soll.

1 Verwenden Sie

, um den Text zu definieren, der auf dem Bild angezeigt wird. und

Der Code lautet wie folgt:

<div>
<span>这是要在图片上出现的文字</span>
</div>

2. Fügen Sie dem div-Element ein Hintergrundbild hinzu und fügen Sie den Stil „display:none;“ hinzu, damit es nicht angezeigt wird wie folgt:

background-image:url(图片名称);
width:250px;
height:100px;
background-position:center;

3. Verwenden Sie den Hover-Selektor. Lassen Sie den Text erscheinen, wenn die Maus auf dem Bild platziert wird. Der Code lautet wie folgt:

display:none;
text-decoration:none;

Ergebnisse ausgeben, wenn sich die Maus nicht auf dem Bild befindet:

Wenn sich die Maus auf dem Bild befindet:

Für weitere Programmierkenntnisse besuchen Sie bitte: Programmiervideos! !

Das obige ist der detaillierte Inhalt vonSo legen Sie den Text in CSS fest, wenn die Maus auf dem Bild platziert wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!