CSS实现鼠标悬停图片时的边框变色效果

转载 2015年07月06日 22:15:49

CSS实现鼠标悬停图片时的边框变色效果,CSSS双边框,鼠标悬停变色效果,用CSS实现的图片双边框效果,鼠标悬停经过时显示背景色,很简单的效果,网上常见,代码不复杂,用的是一些基本的CSS知识。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Border双边框-www.codesc.net</title>
<style>
*{margin:0;padding:0;list-style:none;font-size:14px}
h1{margin:10px;}
img{border:1px solid #ccc}
.info li { padding:8px;width:140px;float:left}
.info li .img { padding:8px; border:1px solid #CBCBCB;display:block;}
.info li .img:link,.info li .img:visited {border:1px solid #CBCBCB;}
.info li .img:hover{border:1px solid #CBCBCB;background:#f0f0f0;}
</style>
</head>
<body>
<div class="info">
<ul>
<li><a href="/" class="img" ><img src="http://www.codesc.net/jscode/demoimg/demoimg.jpg" /></a></li>
</ul>
</div>
</body>
</html>


引自:http://www.codesc.net/jscss/4.shtml

相关文章推荐

纯CSS3实现的鼠标悬停时边框旋转

纯CSS3实现的鼠标悬停时边框旋转的动画效果

用CSS实现鼠标悬停图片放大的效果

使用CSS制作鼠标悬停放大
  • sugarf
  • sugarf
  • 2016年09月06日 06:16
  • 751

纯CSS3实现图像鼠标悬停效果

  • 2014年04月13日 15:14
  • 52KB
  • 下载

33个jQuery与CSS3实现的绚丽鼠标悬停效果

只要你有创意,完全可以使用CSS3来实现漂亮的动效,当然如果配合jQuery,这样会更加强大,实现更多高级绚丽的动画效果。鼠标hover效果是很常用的,虽然很细微的东西,但网站的细节注定的网站的体验,...

纯css样式实现盒子 3D 旋转、鼠标悬停效果

看到一个css3的动画效果,感觉很高大上的样子,心血来潮自己研究了一下。先来个效果图: 下面来看这个3d效果究竟是怎么实现的。 (目前IE暂不支持 transform-style: prese...

组纯CSS实现的鼠标悬停效果

今天来看一组纯CSS实现的鼠标悬停效果,在线研究代码点效果一、效果二、效果三,下载收藏点这里,效果预览点这里。 效果1 效果1的html文件 [html] view pl...

JQUERY实现鼠标悬停在图片上模拟放大镜效果

JQUERY实现鼠标悬停在图片上模拟放大镜效果

CSS3实现超酷的鼠标悬停效果

  • 2015年12月07日 16:43
  • 50KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS实现鼠标悬停图片时的边框变色效果
举报原因:
原因补充:

(最多只允许输入30个字)