CSS 的鼠標(biāo)拂過效果是網(wǎng)頁設(shè)計中常用的一種效果,其中比較常見的是鼠標(biāo)拂過出現(xiàn)解釋的效果。這種效果可以通過 CSS 的 :hover 偽類和 CSS 屬性 content 和 display 來實現(xiàn)。以下是一個例子:
/* 定義一個帶有解釋框的類名為 tooltip 的樣式 */ .tooltip { position: relative; display: inline-block; } /* 定義解釋框的樣式 */ .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; /* 遮罩層漸隱漸顯的時間 */ } /* 鼠標(biāo)拂過時解釋框的顯示樣式 */ .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }
以上代碼中,首先定義了一個類名為 tooltip 的樣式,這個樣式用于包裹需要展示拂過解釋的元素。其次,通過定義一個類名為 tooltiptext 的樣式,來指定鼠標(biāo)拂過時需要展示的解釋框的樣式。最后,在 :hover 偽類中來定義鼠標(biāo)拂過元素時需要應(yīng)用的樣式,其中包括了解釋框的可見性和透明度。
以上就是通過 CSS 實現(xiàn)鼠標(biāo)拂過出現(xiàn)解釋的方法。需要注意的是,在使用該效果時,我們需要在 HTML 中定義好需要展示解釋框效果的元素,并且需要在該元素的 class 中添加 tooltip 這個類名,以便 CSS 正確地應(yīng)用樣式。