图片边框变换CSSHover状态效果一例CSS布局实例图片边框变换CSSHover状态效果一例-CSS布局实例
『 更新时间：2007-01-20 』『 字体：大 中 小 』『 作者：Internet | 来源：无忧整理 』
我们可能会经常用到此效果，在传统的做法中，这一效果的实现是比较困难或繁琐的，现在通过CSS实现鼠标移至图片，边框发生变换的效果，是非常轻易的。我们看下面的代码。
CSS代码：
Example Source Code [www.mb5u.com]p#outer {
margin:0 auto;
width:202px;
}
#outer a {
margin:0px;
display:block;
position: relative;
border:1px solid #069;
}
#outer a:hover {border:1px dashed #c00;}
#outer img {display:block;border:none;background:#069;}
margin:0 auto;
width:202px;
}
#outer a {
margin:0px;
display:block;
position: relative;
border:1px solid #069;
}
#outer a:hover {border:1px dashed #c00;}
#outer img {display:block;border:none;background:#069;}
XHTML代码：
Example Source Code [www.mb5u.com]<p id="outer"><a href="#"> www.MB5U__COM
<img src="/uploads/divcss/logo3.gif" alt="www.mb5u.com" width="200" height="90" /></a>
</p>
<img src="/uploads/divcss/logo3.gif" alt="www.mb5u.com" width="200" height="90" /></a>
</p>
查看运行效果：
Source Code to Run [www.mb5u.com]
- 1.请勿发表广告及违法言论.
- 2.图片边框变换CSSHover状态效果一例,版权归原作者.
-
昵称:
验证:
评论加载中....