網(wǎng)頁設(shè)計 在用DW設(shè)計網(wǎng)頁時,如何設(shè)計當(dāng)鼠標(biāo)經(jīng)過某個圖像熱點時,顯示出新的圖片?
在用DW設(shè)計網(wǎng)頁時,如何設(shè)計當(dāng)鼠標(biāo)經(jīng)過某個圖像熱點時,顯示出新的圖片?使用JS相對簡單。首先,把你需要的所有圖片提前放在網(wǎng)頁上(通常在DIV中)。然后使用CSS隱藏第一個圖像,然后為第一個圖像設(shè)置一個
在用DW設(shè)計網(wǎng)頁時,如何設(shè)計當(dāng)鼠標(biāo)經(jīng)過某個圖像熱點時,顯示出新的圖片?
使用JS相對簡單。
首先,把你需要的所有圖片提前放在網(wǎng)頁上(通常在DIV中)。然后使用CSS隱藏第一個圖像,然后為第一個圖像設(shè)置一個鼠標(biāo)事件。當(dāng)鼠標(biāo)移到圖像時,第一個圖像被隱藏,第二個圖像被顯示。所以情況變了。此外,還可以添加一個鼠標(biāo)移出事件,將鼠標(biāo)移出后兩張圖片的樣式恢復(fù)為原始外觀。
網(wǎng)頁當(dāng)中如何做鼠標(biāo)經(jīng)過圖片顯示文字?
通過CSS偽類中的“hover”。
1. 創(chuàng)建一個新的HTML文件,在body標(biāo)記中添加一個div標(biāo)記,在div標(biāo)記中嵌套一個p標(biāo)記,然后添加p標(biāo)記的內(nèi)容。這里,以“演示文本”為例:
2。在head標(biāo)簽中添加一個style標(biāo)簽,然后在style標(biāo)簽中設(shè)置P標(biāo)簽的預(yù)顯示樣式,該樣式不預(yù)先顯示,因此P標(biāo)簽的屬性代碼設(shè)置為“P{display:0為便于演示,為div設(shè)置一個灰色背景色,代碼為“div{width:100px height:100px background:#CCC}
]3。向div標(biāo)記添加一個hover偽類,然后鍵入一個空格,然后設(shè)置P標(biāo)記的顯示樣式。代碼是“分區(qū):懸停p這段代碼意味著當(dāng)鼠標(biāo)放在div上時,P標(biāo)簽的顯示狀態(tài)將由隱藏變?yōu)轱@示,并且P標(biāo)簽中的文本將被顯示:
html網(wǎng)頁中,如何,鼠標(biāo)經(jīng)過圖片,然后旁邊顯示字體,或者,在另外一個模塊內(nèi)顯示內(nèi)容?
使用div CSS來顯示文本內(nèi)容,當(dāng)鼠標(biāo)懸停在圖片上時,首先,我們設(shè)置一個box對象,并設(shè)置圖像在樣式標(biāo)簽中作為CSS背景圖像。同時,我們將對象HTML設(shè)置為超鏈接顯示:無隱藏,文本內(nèi)容將放置在超鏈接錨文本中,最后當(dāng)鼠標(biāo)懸停在整個對象上時,將顯示超鏈接內(nèi)容。需要注意的是,我們在框?qū)ο笙率褂肅SS位置絕對定位超鏈接a標(biāo)簽,為了美化效果,HTML a標(biāo)簽的寬度與對象的寬度相同,設(shè)置一定的高度,并將CSS背景設(shè)置為半透明背景色。同時,為了與IE6兼容,我們使用IE6來支持hover插件。控制讀取以了解IE6懸停支持。這種效果與所有主流瀏覽器兼容,包括IE6。請下載附件包的源代碼,謝謝
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
20
21
22
23
24
25
26
27
28
29 30 31 32 33 34 35