CSS鼠標經過提示文字是指當鼠標經過某一個元素時,會彈出一段提示文本。這是一種比較實用的效果,我們可以用CSS來實現它。
/* CSS代碼 */ a:hover:before{ content: attr(title); display: block; position: absolute; left: 0; padding: 0.5em; background-color: #fff; border: 1px solid #ccc; }
這段代碼的意思是當鼠標經過a元素時,在a元素前面加上一個文本塊,文本塊的內容是a元素的title屬性的值。
大概解釋一下每個樣式的含義:
- content: attr(title); 表示要在元素前面加上一個文本塊,并把文本塊內容設置為a元素的title屬性的值。
- display: block; 表示文本塊以塊級元素顯示。
- position: absolute; 表示文本塊的位置是相對于文檔流的定位。
- left: 0; 表示文本塊距離父元素左側為0。
- padding: 0.5em; 表示文本塊內邊距為0.5em。
- background-color: #fff; 表示文本塊的背景色為白色。
- border: 1px solid #ccc; 表示文本塊加上一個1px的灰色實線邊框。
使用CSS實現鼠標經過提示文字是一種簡單而實用的效果,在網站中經常會使用到,掌握了這種效果的實現方法,對于網站的設計和實現都有幫助。