如何使用真實文字在懸停時在圖像上顯示文字？

使用真實文字在懸停時顯示文字

您可以使用真實文字而不是圖像精靈在懸停時顯示精靈文字.操作方法如下：

將要在懸停時顯示的圖像和描述包含在容器 div 內。此 div 的尺寸應與影像相同。

 <img  class="img__img" src="%E2%80%9Chttp://placehold.it/257x200.jpg%E2%80%9D/" alt="如何使用真實文字在懸停時在圖像上顯示文字？" ><br> <p></p>

將以下CSS 分配給容器 div (.img__wrap):

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

將文字描述絕對定位在容器div 內(.img__description).

.img__description {<br> 位置：絕對;<br> 頂部：0 ;<br> 底部：0;<br> 左：0;<br> 右： 0;<br> 背景：rgba(0, 0, 0, 0.7);<br>顏色：#fff;<br> 可見度：隱藏；<br> 不透明度： 0;<br>}<pre class="brush:php;toolbar:false">

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

使用此解決方案，當使用者將滑鼠懸停在圖像上時，您的文字描述將顯示在圖像上結束了。

以上是如何使用真實文字在懸停時在圖像上顯示文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！