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>
<pre class="brush:php;toolbar:false"></div>
</div>

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

<div>

< /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!

css using class this display position background http

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn