有些時候,我們希望鼠標移到文字或者圖片上的時候,顯示一些說明文字,
以下爲實現方法,因爲我最終實現的爲在圖片上加文字,所以 顏色度 將別人的 .8==>.1
下移的位置也從 -34px==>-12px (在圖上顯示文字正好)。你也可以自己調整其它的部分。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>實踐題 </title> <style type="text/css"> .tags { position: relative; } .tags:hover:after { background: rgba(0,0,0,.1); border-radius: 10px; bottom: -12px; color: #fff; content: attr(ishow); left: 10%; padding: 5px 15px; position: absolute; z-index: 98; width: 350px; } </style> </head> <body> <a class="tags" ishow="Text shown on hovering">Exposed text</a> </body> </html>