| 個人檔案❥·۰•●果果素材+教程大集合☃相片部落格清單 | 說明 |
|
5/8/2005 鼠标点击文字的代码设置
在整篇拿走的时候请注明图片出处 保留原地址或使用引用通告!!~~!!!~~~!!!!谢谢~ 1.鼠标移到,链接变色(最基本拉,因为是变色,所以把a{}也拿出来对比,主要要看的是a:hover里的变化)
A {color: #51bfe0} 链接颜色为#51bfe0 A:hover { color: #000000 } 鼠标移过去为#000000 2.鼠标移到,链接加粗(bold就是粗体) A:hover {font-weight: bold } 3.鼠标移到,链接出现下划线 A:hover {text-decoration: underline;} 4..鼠标移到,链接文字下面有背景色 A:hover {background-color: #CCFFFF} (这里多说一句)加背景色的同时字体颜色也可一变,比如链接是黑色,鼠标移过是黑底白字,这样设置如下 A {color: #000000} A:hover {background-color: #000000;color: #FFFFFF;} 5.鼠标移到链接,链接文字出现(上、下、左、右虚线、虚点) A:hover {border-bottom:1px dashed #51bfe0 } 1px:虚线的粗细 dashed:线条的样式。dashed是“虚线”、dotted是“点线”、soild是“实线” #51bfe0:线的颜色的代码。 border-bottom 那里代表会在文字的下方出现虚线,还可以是border-top(上面出线)、border-right(右面出线) 或 border-left(左面出线),若想文字的四边都出现虚线,可直接用border,border:1px dashed #51bfe0(这样就使鼠标移过有一个虚线或者点的框) 6.鼠标移到链接,链接雾化 A:hover {FILTER: blur (add="0",direction="90",strength="5"); COLOR:#ffffff; HEIGHT: 0px;} 其中add="0",direction="90",strength="5"为雾化的一些值,强度阿。大小阿之类的,可以改改看 7.鼠标移到链接,鼠标变化(这个问题问得也比较多) A:hover { cursor:crosshair } 其中crosshair代表的就是鼠标里的十字精度,也就是我这里用的,也可以改成别的 cursor:text就是出现打字时那个鼠标 cursor:wait就是忙时出现的那个鼠标 这种方法实现的是调用的浏览者自己的鼠标,如果他把十字精度定义成了一朵花,那移过链接就是一朵花而不是十字 还有一种是让浏览者使用你定义的鼠标(好像我原来页面那样) A:hover { cursor:url("http://www.5Dblog.com/new/1usachan.cur") } 这个地址就是你把鼠标上传到某个地方的绝对地址,这样的话鼠标移过链接就会显示这个你上传的鼠标,无论浏览者自己用什么样的鼠标 注意!以上的代码我只是提取了这个功能的代码,并不是某个状态完全代码,就比如鼠标这个 A:hover { cursor:crosshair }这个只是在激活状态定义了鼠标,我们还需要定义别的,比如: A:hover { cursor:crosshair; color: #000000; border-bottom:1px dashed #51bfe0; } 这样就是鼠标会变,颜色也变成了黑色,下面还有下虚线。也可以加上上面举的其它功能,功能之间用分号(;)分隔
回應 (30)
引用通告 (2)此內容的引用通告是: http://zorroiwendy.spaces.live.com/blog/cns!27EA332395F8B7C!1596.trak 引述這則內容的部落格
|
|
|