純CSS實現的鼠標經過文本時提示的信息,提升用戶體驗
來源：易賢網 閱讀：785 次 日期：2015-04-16 16:34:26
溫馨提示：易賢網小編為您整理了“純CSS實現的鼠標經過文本時提示的信息,提升用戶體驗”,方便廣大網友查閱！

最近一直在研究如何用CSS更好的提升用戶體驗，分享下如何利用純CSS實現的鼠標經過文本時提示的信息。代碼如下：

<a class="tooltips" href="#tooltips">這就是Tooltips<span>正是你見到的，這些附加的說明文字是在鼠標經過的時候顯示。</span></a> <style type="text/css"> /*Tooltips*/ .tooltips{ position:relative; /*這個是關鍵*/ z-index:2; } .tooltips:hover{ z-index:3; background:none; /*沒有這個在IE中不可用*/ } .tooltips span{ display: none; } .tooltips:hover span{ /*span 標簽僅在 :hover 狀態(tài)時顯示*/ display:block; position:absolute; top:21px; left:9px; width:15em; border:1px solid black; background-color:#ccFFFF; padding: 3px; color:black; } </style> 我的網站 有關于網站的東西歡迎大家一起交流！

更多信息請查看IT技術專欄

更多信息請查看網頁制作

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號：滇ICP備2023014141號-1 云南省教育廳備案號：云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證：（云）人服證字（2023）第0102001523號
聯系電話：0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號：hfpxwx
咨詢QQ：1093837350（9:00—18:00）版權所有:易賢網