※ 引述《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 好吧...... 好人做到底 ※ 编辑: charto 来自: 61.66.73.162 (05/07 21:46)