源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>编程字典</title> <style> .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 100%; left: 50%; margin-left: -60px; /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */ opacity: 0; transition: opacity 1s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } </style> </head> <body style="text-align:center;"> <h2>鼠标经过淡入提示</h2> <p>当你把鼠标移动到下面的文字，提示文本将淡出并花了1秒钟去彻底从无形到有形.</p> <div class="tooltip">鼠标经过我 <span class="tooltiptext">提示文本</span> </div> </body> </html>
运行结果