使用div css實現滑鼠懸停圖片上方時顯示文字內容原理: 首先我們設定一個盒子物件,並且將圖片使用style標籤內設定為CSS背景圖片,同時設定該物件html a超連結display:none隱藏,該超連結錨文字內放好文字內容,最後設定滑鼠懸停經過整個物件時候顯示超連結內容。 需要注意是,我們使用了css position絕對定位超連結a標籤位於該盒子物件下方,並且為了美化效果給html a標籤寬度與物件寬度相同,設定一定高度,設定css背景為半透明背景顏色。 同時為了相容IE6我們使用了IE6支援hover外掛。控制閱讀了解ie6 hover支援。本效果相容各大瀏覽器包括IE6。 打包原始碼請下載附件,謝謝
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29 30 31 32 33 34 35
使用div css實現滑鼠懸停圖片上方時顯示文字內容原理: 首先我們設定一個盒子物件,並且將圖片使用style標籤內設定為CSS背景圖片,同時設定該物件html a超連結display:none隱藏,該超連結錨文字內放好文字內容,最後設定滑鼠懸停經過整個物件時候顯示超連結內容。 需要注意是,我們使用了css position絕對定位超連結a標籤位於該盒子物件下方,並且為了美化效果給html a標籤寬度與物件寬度相同,設定一定高度,設定css背景為半透明背景顏色。 同時為了相容IE6我們使用了IE6支援hover外掛。控制閱讀了解ie6 hover支援。本效果相容各大瀏覽器包括IE6。 打包原始碼請下載附件,謝謝
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29 30 31 32 33 34 35