有些时候,我们希望鼠标移到文字或者图片上的时候,显示一些说明文字,
以下为实现方法,因为我最终实现的为在图片上加文字,所以 颜色度 将别人的 .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>