CSS懸停時顯示字,是Web開發(fā)中常用的效果之一。通過CSS選擇器和屬性,我們可以讓頁面上的元素在鼠標(biāo)懸停時顯示指定的文本或圖片等內(nèi)容。
/*使用HTML的title屬性懸停時顯示文本*/ a:hover::before{ content: attr(title); position: absolute; top: 30px; left: 0; width: 100%; text-align: center; background-color: rgba(0,0,0,0.8); color: #fff; padding: 5px; font-size: 14px; } /*使用CSS選擇器懸停時顯示文本*/ .button{ background-color: #4267B2; color: #fff; padding: 10px 20px; border-radius: 5px; position: relative; } .button:hover::before{ content: "點擊了解更多詳情!"; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background-color: rgba(0,0,0,0.8); color: #fff; padding: 5px; font-size: 14px; border-radius: 5px; }
上述代碼中,我們使用了偽元素和絕對定位來實現(xiàn)懸停顯示文本的效果。其中第一段代碼通過選擇器選中a標(biāo)簽,并獲取其title屬性值來作為顯示文本。第二段代碼則選中.button類,并在其上添加偽元素,以展示特定的文本內(nèi)容。通過這些寫法,我們可以在頁面上為用戶提供更加友好的交互體驗。
上一篇css懸浮下劃線
下一篇css懸停圖片變換圖片