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

CSS鼠标悬停div加边框效果

css实现鼠标悬停时图片加边框效果 .demo{background:white;margin:0 5px;width:170px;height:170px;} .demo:hover{b...
  • u011447828
  • u011447828
  • 2015年09月23日 17:24
  • 3979

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

今天来看一组纯CSS实现的鼠标悬停效果,在线研究代码点效果一、效果二、效果三,下载收藏点这里。...
  • whqet
  • whqet
  • 2014年04月03日 20:29
  • 15870

CSS鼠标悬停图片加边框效果,不位移的方法

css实现鼠标悬停时图片加边框效果 body{background:#222;color:#06c;} em{ font-style:inherit;} img{background:whi...
  • u011447828
  • u011447828
  • 2015年09月23日 16:56
  • 1789

自定义文本框 鼠标经过 边框颜色变化

using System; using System.Collections.Generic; using System.Text; using System.Windows.Forms; using...
  • hanjieson
  • hanjieson
  • 2012年12月08日 15:31
  • 1447

CSS定义鼠标移上图片链接,出现边框效果

一个比较适合网站友情链接用的CSS图片链接和文字链接样式定义代码,图片样式简洁,鼠标移上后,图片链接出现边框,文字链接去掉了下划线,比较中庸,但放在网页上既简洁,又漂亮,特别是用在网站底部的时候,我觉...
  • life66881
  • life66881
  • 2015年06月15日 12:58
  • 1328

鼠标悬停图片、文字css3效果

其实这样的效果也很常见,但是我平时用到很少,在其他网站看到这样的效果,第一反应就是查看源代码,看他怎么运用的,结果用了很多的div,最主要的是用js来实现。目前很多浏览器也都兼容css3新属性,这个例...
  • yuzhongkai
  • yuzhongkai
  • 2016年04月10日 01:19
  • 1168

css元素边框发光效果——box-shadow

border:#aaa 1px dashed; box-shadow:inset 0 -5px 8px -7px rgba(81, 81,81,0.8); box-shadow参数解释:   阴影...
  • zhituji
  • zhituji
  • 2015年10月30日 20:49
  • 2587

CSS实现鼠标聚焦时边框不变,框内图片放大

div{ cursor: pointer; width: 130px; height: 130px; position: relative; overflow:...
  • gingerredjade
  • gingerredjade
  • 2015年12月26日 23:02
  • 2466

[16]CSS3 边框图片效果

一.属性解释HTML5 中 CSS3 中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩。CSS3 提供了一个新的属性集合,用这几个属性可以嵌入图片形式的边框。这样,边框就可以自定义了。 1...
  • yougoule
  • yougoule
  • 2017年01月05日 23:08
  • 645

jquery实现鼠标悬停时图片的外框大小不变而图片放大

jquery图片放大插件鼠标滑过图片放大效果 $(document).ready(function() { $(".testimg").zoomImgRollover(); }...
  • fengrucheng
  • fengrucheng
  • 2014年09月12日 18:41
  • 3295
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS实现鼠标悬停图片时的边框变色效果
举报原因:
原因补充:

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