html上实现鼠标悬停显示另一元素
生活随笔
收集整理的這篇文章主要介紹了
html上实现鼠标悬停显示另一元素
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
html代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>鼠標懸停</title> <style> div{ clear:both; margin:5px 0 0 0; font-size:12px; line-height:22px; } a.alt{ position:relative; background-color:#fff; float:left; width:158px;height:20px; margin:0 auto; border:1px solid #eee; text-align:center; text-decoration:none; color:#0066cc; } a.alt:hover{ background:#fff; text-decoration:none;z-index:2; } a.alt span{ display:none; } a.alt:hover span{ position:absolute; display:block; top:-1px;left:158px; width:130px;height:60px; border:1px solid #eee; z-index:1; } </style> </head> <body> <div> <a class='alt' href="/"><span>test1</span>test</a> </div> </body> </html>可以自行調試修改
總結
以上是生活随笔為你收集整理的html上实现鼠标悬停显示另一元素的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SX音速游戏
- 下一篇： Wordpress模板标签大全