CSS3中提供了許多新特性,其中之一便是鼠標移動彈框。當(dāng)鼠標移動到頁面上某個元素時,可以顯示對應(yīng)的彈框。
/* 彈框樣式 */ .tooltip { position: absolute; padding: 4px; font-size: 12px; background-color: #666; color: #fff; z-index: 9999; opacity: 0; transition: opacity 0.3s; } /* 鼠標移動時彈框出現(xiàn) */ .element:hover .tooltip { opacity: 1; }
上面的代碼中,我們定義了一個.tooltip樣式,用于展示彈框。然后使用:hover偽類來監(jiān)聽鼠標移動事件。當(dāng)鼠標移動到某個元素上時,使用.element:hover選擇器來選中該元素,并展示對應(yīng)的彈框。
通過CSS3的鼠標移動彈框,我們可以讓頁面更加豐富多彩,提高用戶體驗。