CSS 一张图片作为的链接，如何实现鼠标放上去边框变色的效果？

html-css022

CSS 一张图片作为的链接，如何实现鼠标放上去边框变色的效果？,第1张

边框尽量用在a上，避免用在img上。 :hover伪类尽量用在a上，因为IE6不支持其他元素的hover伪类。hover意思就是鼠标移上去的动作。

不知道你有没有用reset来清理页面，毕竟各浏览器默认效果不一，因此我把reset的css也写了进去，第二部分为你想要的css。a标签要设定边框，一定要它把先转为块级元素，否则

他的高度不够，仅仅是行高。

<style type="text/css">

/* 最简单的reset方式*/

* {margin:0padding:0}

img {border:none}

/* 第二部分 给a标签定义一个类名，名字随意，将a转换为块级元素，并设定他的宽高和图片一样。*/

a.bor {display:blockwidth: 48pxheight:64px}

a.bor:hover {border:1px #F00 solid}

</style>

<!--下面是html代码部分-->

<a href="#" class=“bor”>

<img alt="" src="images/sp.jpg" />

</a>

可以用CSS来设定图片的边框，比如说：<img src=“1.gif”>在css中可以设置成这样：img{

border:1px solid #FF0000

}border就是边框的意思，1px就是1像素的边框，solid是实线的意思，还有dotted点线，dashed虚线等，最后的就是边框的颜色了。

<ul>

<li><img src="img.jpg" />这里显示的是文字</li>

</ul>

<style>

ul li img{ border:1px solid #ccc padding:3px}

ul li img:hover{ border:1px solid #f60}

</style>

控制li里面的图片就是li img 这样写

img:hover是控制鼠标放上去图片的边框颜色

希望可以帮到你~~