分类
前端技术

CSS图片hover边框效果

这制作CSS边框效果的时候我们都知道用a标签和a:hover但是我往往这样定义会达不到想要的效果,今天在做wordpress模版的时候遇到这个问题了,看我的怎么解决的。

<div class=”kanfangsuoluetu”>

<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><img src=”<?php echo catch_post_image() ?>” alt=”” width=”178px” height=”220px” />

</a>

</div>

CSS

.kanfangsuoluetu {float:left;width:178px;list-style: none;margin:10px 8px 10px 12px;}
.kanfangsuoluetu img{border:1px solid transparent;}
.kanfangsuoluetu a {color:#c00;width:180px;border:2px solid #ddd; display:block;position: relative;}
.kanfangsuoluetu a:hover {color:#333;border:2px solid #f00;}

其实我们需要注意的是上面红色部分,大家可以试试,去掉的效果。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注