在CSS中,可以通過:hover偽類實(shí)現(xiàn)鼠標(biāo)滑過元素時(shí)顯示其它的元素,如文字、圖片、按鈕等。
.box { width: 200px; height: 200px; background-color: #ccc; } .box:hover p { display: block; } .box p { display: none; text-align: center; font-size: 20px; line-height: 200px; color: #fff; }
在上面的代碼中,我們?cè)O(shè)置了一個(gè)box類,寬高均為200px,并設(shè)置了背景色為灰色。同時(shí),我們還設(shè)置了一個(gè)p標(biāo)簽作為子元素,其中的內(nèi)容為要顯示的文字,設(shè)置了一些基本的文字樣式,如居中、字體大小、行高、顏色等。
接著,在CSS中,我們使用:hover偽類來控制鼠標(biāo)滑過box元素時(shí),顯示p標(biāo)簽內(nèi)的文字。因?yàn)閜標(biāo)簽一開始是隱藏的,所以需要將display屬性設(shè)置為none。
通過這種方式,我們就可以輕松地實(shí)現(xiàn)鼠標(biāo)滑過元素時(shí)顯示其它的元素的效果,從而增強(qiáng)頁面的交互性。