各种鼠标经过图片边框加粗效果整理

作者:天空诚来源:蓝色理想时间:2007-9-29 网友评论条【大中小】

本文整理了3种鼠标经过图片，图片边框加粗或改变颜色的方法，希望大家喜欢。下面3中只是提供了一个方法，具体的鼠标经过图片的样式，你自己可以修改为你想要的效果，知道了方法，想做个好的效果就不难了！

呵呵，本站也有这个图片显示效果：请看：http://www.aspxhome.com/design/css/ 这里我只是改变了边框的颜色。

方法一：通过js结合CSS来实现，当鼠标经过图片时js代码动态的改变了图片的CSS样式，使得图片加上了边框。

作者：colinivy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #head { width:92px; height:33px; overflow:hidden; text-align:center; padding-top:2px; border:1px solid #FFF; } </style> </head> <body> <div id="head" > <img src="/images/logo.gif" alt="" /> </div> </body> <script type="text/javascript">  </script> </html> [提示：你可先修改部分代码，再按运行]

二：纯css样式实现，推荐！

这种方法只要css就可以实现了鼠标经过图片样式的变化。更加的符合标准，兼容性应该更好。

作者：dolldom

三：js+css实现

与第一种方法不同，使用了onmouseover和onmouseout来控制鼠标经过图片的样式变化。

【加入收藏】【报告错误】【投递文章】【复制地址】【返回顶部↑】

本文地址：http://www.aspxhome.com/design/css/20079/180029.htm

站长工具

各种鼠标经过图片边框加粗效果整理

Aspxhome.com. 中国Asp之家. 版权所有