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