本篇內(nèi)容介紹了“css如何設(shè)置鼠標(biāo)經(jīng)過元素顯示圖片”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

向陽網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,向陽網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為向陽上千多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的向陽做網(wǎng)站的公司定做！

在css中，可以使用“:hover”選擇器來實(shí)現(xiàn)鼠標(biāo)經(jīng)過元素顯示圖片效果，“:hover”選擇器用于規(guī)定鼠標(biāo)指針浮動(dòng)元素上時(shí)添加的特殊樣式，語法格式“元素:hover{background: url(圖片地址);}”。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

在css中，可以使用“:hover”選擇器來實(shí)現(xiàn)鼠標(biāo)經(jīng)過元素顯示圖片效果。

:hover選擇器指定在鼠標(biāo)移到元素上時(shí)添加的特殊樣式。

下面通過代碼示例來具體看看：

	
		
		
			div{
				width: 400px;
				height: 300px;
				border: 1px solid red;  
			}
			div:hover{
				background: url(img/1.jpg);
				background-size: 400px;
			}
		
	
	
		
將鼠標(biāo)移動(dòng)到div盒子中：

	

效果圖：

“css如何設(shè)置鼠標(biāo)經(jīng)過元素顯示圖片”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！