CSS觸碰提示是一種增加用戶體驗的技術,它可以在用戶鼠標觸碰某個元素時,展示預定好的相關信息。例如,當用戶鼠標觸摸一個鏈接時,會彈出相關的鏈接信息,讓用戶更直觀地了解該鏈接的內容和目的。
a:hover { color: red; text-decoration: underline; } a[data-tooltip]::after { content: attr(data-tooltip); position: absolute; top: 30px; left: 50%; transform: translateX(-50%); display: none; background-color: #333; color: #fff; padding: 5px; border-radius: 5px; } a[data-tooltip]:hover::after { display: block; }
上面的代碼就是一個簡單的CSS觸碰提示效果,當用戶鼠標觸摸一個帶有"data-tooltip"屬性的鏈接時,會在該鏈接下方顯示該屬性的值,即鼠標提示信息。
需要注意的是,CSS觸碰提示在移動端的效果可能不太好,因為移動設備缺少鼠標,只能通過觸屏來交互。因此,在移動端,可以考慮使用長按觸發效果、點擊展示效果等方式來替代CSS觸碰提示。
下一篇css讓div并排顯示