Wie kann ich beim Hover mithilfe von echtem Text Text über einem Bild anzeigen?

Text beim Hover mit echtem Text anzeigen

Sie können beim Hover Text über einem Bild anzeigen, indem Sie echten Text anstelle von Bild-Sprites verwenden. So geht's:

Wickeln Sie das Bild und die Beschreibung, die beim Hover angezeigt werden sollen, in ein Container-Div ein. Dieses Div sollte die gleichen Abmessungen wie das Bild haben.

 <img class="img__img" src= "http://placehold.it/257x200.jpg" /><br> <p></div>

Weisen Sie dem Container div (.img__wrap) das folgende CSS zu:

.img__wrap {
  position: relative;
  height: [Set to match image height];
  width: [Set to match image width];
}

Positionieren Sie die Textbeschreibung absolut innerhalb des Container-Div (.img__description).

.img__description {<br> Position: absolut;<br> oben: 0 ;<br> unten: 0;<br> links: 0;<br> rechts: 0;<br> Hintergrund: rgba(0, 0, 0, 0.7);<br> Farbe: #fff;<br> Sichtbarkeit: ausgeblendet;<br> Deckkraft: 0;<br>}</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></div>
</div>

Make the text description visible and opaque on hover by adding the following CSS:

<div>

Nach dem Login kopieren

< /div>

Mit dieser Lösung wird Ihre Textbeschreibung erscheinen über dem Bild, wenn der Benutzer mit der Maus darüber fährt.

Das obige ist der detaillierte Inhalt vonWie kann ich beim Hover mithilfe von echtem Text Text über einem Bild anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!