網(wǎng)頁(yè)設(shè)計(jì)圖 在用DW設(shè)計(jì)網(wǎng)頁(yè)時(shí),如何設(shè)計(jì)當(dāng)鼠標(biāo)經(jīng)過(guò)某個(gè)圖像熱點(diǎn)時(shí),顯示出新的圖片?
在用DW設(shè)計(jì)網(wǎng)頁(yè)時(shí),如何設(shè)計(jì)當(dāng)鼠標(biāo)經(jīng)過(guò)某個(gè)圖像熱點(diǎn)時(shí),顯示出新的圖片?使用JS相對(duì)簡(jiǎn)單。首先,把你需要的所有圖片提前放在網(wǎng)頁(yè)上(通常在DIV中)。然后使用CSS隱藏第一個(gè)圖像,然后為第一個(gè)圖像設(shè)置一個(gè)
在用DW設(shè)計(jì)網(wǎng)頁(yè)時(shí),如何設(shè)計(jì)當(dāng)鼠標(biāo)經(jīng)過(guò)某個(gè)圖像熱點(diǎn)時(shí),顯示出新的圖片?
使用JS相對(duì)簡(jiǎn)單。
首先,把你需要的所有圖片提前放在網(wǎng)頁(yè)上(通常在DIV中)。然后使用CSS隱藏第一個(gè)圖像,然后為第一個(gè)圖像設(shè)置一個(gè)鼠標(biāo)事件。當(dāng)鼠標(biāo)移到圖像時(shí),第一個(gè)圖像被隱藏,第二個(gè)圖像被顯示。所以情況變了。此外,還可以添加一個(gè)鼠標(biāo)移出事件,將鼠標(biāo)移出后兩張圖片的樣式恢復(fù)為原始外觀。
網(wǎng)頁(yè)當(dāng)中如何做鼠標(biāo)經(jīng)過(guò)圖片顯示文字?
通過(guò)CSS偽類中的“hover”。
1. 創(chuàng)建一個(gè)新的HTML文件,在body標(biāo)記中添加一個(gè)div標(biāo)記,在div標(biāo)記中嵌套一個(gè)p標(biāo)記,然后添加p標(biāo)記的內(nèi)容。這里,以“演示文本”為例:
2。在head標(biāo)簽中添加一個(gè)style標(biāo)簽,然后在style標(biāo)簽中設(shè)置P標(biāo)簽的預(yù)顯示樣式,該樣式不預(yù)先顯示,因此P標(biāo)簽的屬性代碼設(shè)置為“P{display:0為便于演示,為div設(shè)置一個(gè)灰色背景色,代碼為“div{width:100px height:100px background:#CCC}
]3。向div標(biāo)記添加一個(gè)hover偽類,然后鍵入一個(gè)空格,然后設(shè)置P標(biāo)記的顯示樣式。代碼是“分區(qū):懸停p此代碼表示當(dāng)鼠標(biāo)放置在div上時(shí),P標(biāo)簽的顯示狀態(tài)將從隱藏變?yōu)轱@示,并且P標(biāo)簽中的文本將被顯示