→ saiding:可以麻煩解釋一下語法內容嗎??謝謝!! 推 218.163.128.28 05/07
好吧...... 好人做到底
※ 編輯: charto 來自: 61.66.73.162 (05/07 21:46)
※ 引述《ILoveHer (I Love Her)》之銘言：
: ※ 引述《genever (what)》之銘言：
: : 其實他只是用了onMouseOver跟onMouseOut的效果而已
: : （游標經過）（游標離開）
: : <img id=ps1 src="pic1.jpg"
: : onMouseOver="ps1.src='pic2.jpg';ps1.width=352;"
: : onMouseOut="ps1.src='pic1.jpg';ps1.width=150;">
: : 至於框線他其實有加上
: : 只是太細了看不清楚
: 請問類似的效果可以用CSS做到嗎??
可以 不過有點複雜......
如下...... (不是很合格的網頁)
<style type="text/css">
a.mylink:hover {background-image: url(2.jpg);height:40px;width:40px}
a.mylink {display:block;background-image: url(1.jpg);height:20px;width:20px;color:#ffffff}
</style>
<a href="" class="mylink">a</a>
原理就是利用, a:hover 這種滑鼠指標移到連結上會變CSS設定的性質, 而移走後
又恢復成原來的樣子, 於是當滑鼠移到連結的區域, 就把背景圖更換(換成大的)
, 但也因為圖是放在背景的關係, 所以必須指定 height 和 width 才能夠正確
顯示全部的圖(否則瀏覽器會依照內容自行設定大小), 並且這個用法將 a 的
display從inline硬是改成了block, 不過這也無所謂, 因為會這樣做通常你會讓
他靠到最左邊或是最右邊, 就不會影響, 如果還是要維持 a 的 display:inline
的話, height 改成 line-height就可以解決這個問題, 但是接者就要考慮垂直對
齊的問題了
解說
background-image 背景圖
height 產生的區塊高度
width 產生的區塊寬度
display:block 指定一個網頁上的東西以 block 的方式呈現
color 文字顏色
:hover <a> 的虛擬類別, 只影響 <a> 在滑鼠移動到上面的時候
.mylink 指定(新設)mylink樣式
實際測試: block http://www.csie.ntu.edu.tw/~b92010/20040507+20040731/test.html
inline http://www.csie.ntu.edu.tw/~b92010/20040507+20040731/test2.html
很新版本的 IE 和 Mozilla(Netscape) 都可以用......
不過 inline的, 用 Mozilla會因為無法指定 width和 height(所以改成line-hieght)
, 導致失敗(不過本來就不可以指定 height或是 width 吧......)
以上檔案20040731以後不一定還會活著......
--
嘴角勉強撐起了笑 也要讓你看到最後一絲的驕傲
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 61.66.73.162