他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)1.改变background-size属性
& &将图片作为某个html元素的背景图片，用transition属性改变图片的大小。
<span style="color: # .container{
<span style="color: #
background-size: 100% 100%;
<span style="color: #
transition: all 2s;
<span style="color: # }
<span style="color: # .container:hover{
<span style="color: #
background-size: 120% 120%;
<span style="color: # }
这种方法有个问题是图片缩放的时候会出现抖动的现象
2.利用scale
& &使用img标签，并在img标签上添加transform属性改变scale值
<span style="color: # img{
<span style="color: #
transition: all 2s;
<span style="color: # }
<span style="color: # img:hover{
<span style="color: #
transform: scale(1.2);
<span style="color: # }
这种方法能够获得比较平滑的缩放效果
阅读(...) 评论()鼠标划过图片放大后，放大后的图片怎么被下一个DIV挡在下面？如何使放大后的图片显示在最上层
[问题点数：40分，结帖人kyong]
鼠标划过图片放大后，放大后的图片怎么被下一个DIV挡在下面？如何使放大后的图片显示在最上层
[问题点数：40分，结帖人kyong]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2011年3月 Web 开发大版内专家分月排行榜第二2011年1月 Web 开发大版内专家分月排行榜第二2010年10月 Web 开发大版内专家分月排行榜第二2010年9月 Web 开发大版内专家分月排行榜第二2010年6月 Web 开发大版内专家分月排行榜第二
2012年10月 Web 开发大版内专家分月排行榜第三2010年7月 Web 开发大版内专家分月排行榜第三
2011年3月 Web 开发大版内专家分月排行榜第二2011年1月 Web 开发大版内专家分月排行榜第二2010年10月 Web 开发大版内专家分月排行榜第二2010年9月 Web 开发大版内专家分月排行榜第二2010年6月 Web 开发大版内专家分月排行榜第二
2012年10月 Web 开发大版内专家分月排行榜第三2010年7月 Web 开发大版内专家分月排行榜第三
2013年10月 Web 开发大版内专家分月排行榜第三
2011年3月 Web 开发大版内专家分月排行榜第二2011年1月 Web 开发大版内专家分月排行榜第二2010年10月 Web 开发大版内专家分月排行榜第二2010年9月 Web 开发大版内专家分月排行榜第二2010年6月 Web 开发大版内专家分月排行榜第二
2012年10月 Web 开发大版内专家分月排行榜第三2010年7月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！|纯css实现鼠标置上展开显示全部内容效果
&纯css实现鼠标置上展开显示全部内容效果
& & 一般实现这样的效果都会选择用js...简单明了....本人js稍弱....css强....另加上工作需要...所以就写了一个纯css的...
& & 代码如下：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
*{padding:0;margin:0;}
ul{list-style:}
.lun{padding:30float:font:12px/26px &宋体&;}
.lun li{width:130background:#ffeab8;float:}
.lun li img{width:130height:150float:}
.lun li.ont{background:#cff0_height:130}
.lun li a{display:color:#3d203f;text-decoration:padding:10width:110height:130px !_height:130position:left:0;top:0;z-index:10;float:}
.lun li a b{color:#cc0b39;font-size:14padding-bottom:5display:font-size:14}
.lun li a p,.lun li a p{display:}
.lun li a:hover{display:text-decoration:height:100%;position:z-index:1000 !}
.lun li a:hover p{display:color:#3d203f;width:150padding:10position:left:-20top:-20background:#ffeab8;cursor:box-shadow:1px 1px 10px #333;}
.lun li a:hover p{display:color:#3d203f;background:#cff0position:left:-10top:-10width:150padding:10box-shadow:1px 1px 10px #333;cursor:}
&title&纯css实现鼠标置上展开显示全部内容&/title&
&ul class=&lun clearfix f12 lh24&&
&li&&img src=http://up.2cto.com/256.jpg& /&&/li&
&li&&a href=&#&&&b&论点&/b&据烟台房产网数据监控中心对烟台房产交易网的数据统计...&p&&b&论点&/b&据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计.据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.&/p&&/a&&/li&
&li&&img src=http://up.2cto.com/256.jpg& /&&/li&
&li class=&ont&&&a href=&#&&&b&论点&/b&据烟台房产网数据监控中心对烟台房产交易网的数据统计...&p&&b&论点&/b&据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.&/p&&/a&&/li&
&li&&img src=http://up.2cto.com/256.jpg& /&&/li&
&li&&a href=&#&&&b&论点&/b&据烟台房产网数据监控中心对烟台房产交易网的数据统计...&p&&b&论点&/b&据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计.据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.&/p&&/a&&/li&
&li&&img src=http://up.2cto.com/256.jpg& /&&/li&
&li class=&ont&&&a href=&#&&&b&论点&/b&据烟台房产网数据监控中心对烟台房产交易网的数据统计...&p&&b&论点&/b&据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.&/p&&/a&&/li&
&li&&img src=http://up.2cto.com/256.jpg& /&&/li&
&li&&a href=&#&&&b&论点&/b&据烟台房产网数据监控中心对烟台房产交易网的数据统计...&p&&b&论点&/b&据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计.据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.&/p&&/a&&/li&
&li&&img src=http://up.2cto.com/256.jpg& /&&/li&
&li class=&ont&&&a href=&#&&&b&论点&/b&据烟台房产网数据监控中心对烟台房产交易网的数据统计...&p&&b&论点&/b&据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.&/p&&/a&&/li&
&li&&img src=http://up.2cto.com/256.jpg& /&&/li&
&li&&a href=&#&&&b&论点&/b&据烟台房产网数据监控中心对烟台房产交易网的数据统计...&p&&b&论点&/b&据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计.据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.&/p&&/a&&/li&
&li&&img src=http://up.2cto.com/256.jpg& /&&/li&
&li class=&ont&&&a href=&#&&&b&论点&/b&据烟台房产网数据监控中心对烟台房产交易网的数据统计...&p&&b&论点&/b&据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.&/p&&/a&&/li&
&li&&img src=http://up.2cto.com/256.jpg& /&&/li&
&li&&a href=&#&&&b&论点&/b&据烟台房产网数据监控中心对烟台房产交易网的数据统计...&p&&b&论点&/b&据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计.据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.&/p&&/a&&/li&
&li&&img src=http://up.2cto.com/256.jpg& /&&/li&
&li class=&ont&&&a href=&#&&&b&论点&/b&据烟台房产网数据监控中心对烟台房产交易网的数据统计...&p&&b&论点&/b&据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.&/p&&/a&&/li&
&li&&img src=http://up.2cto.com/256.jpg& /&&/li&
&li&&a href=&#&&&b&论点&/b&据烟台房产网数据监控中心对烟台房产交易网的数据统计...&p&&b&论点&/b&据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计据烟台房产网数据监控中心对烟台房产交易网的数据统计.据烟台房产网数据监控中心对烟台房产交易网的数据统计..据烟台房产网数据监控中心对烟台房产交易网的数据统计.&/p&&/a&&/li&欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> 鼠标移动悬停在图片上图片变色或半透明变化效果实现，CSS鼠标悬停图片上图片变灰、图片变色、图片半透明
一、DIVCSS5介绍与说明：
看到网页中的图片当鼠标移动到图片上时（鼠标悬停在图片上）图片变灰，看似变色变灰效果，实际是图片被设置为半透明样式。
二、关键CSS代码：
a:hover&img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity:&0.8;}&
此作用，设置鼠标移动到A超链接时，超链接内图片（img）呈现半透明显示80%效果。
filter&设置平台IE半透明效果样式，值1-100，值越小越透明，设置IE8以前的透明使用
opacity&设置IE半透明效果样式，值0.1-1，值越小越透明，设置IE8以后版本的透明使用
-moz-opacity&对非IE浏览器设置，比如火狐，语法与IE相同
此设置CSS样式opacity、filter在IE6中不支持，因为现在IE6版本占有急剧下滑，所以一般不考虑IE6对此CSS的支持。
三、鼠标移动到图片变色，图片半透明实例
实例案例描述：设置两个，两个盒子分别放入一张图，通过对其设置鼠标悬停()时图片半透明为80%和70%，观察其效果。
1、关键CSS代码
.div1,.div2{&width:500&margin:20px&auto}&.div1&a:hover&img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity:&0.8}&.div2&a:hover&img{filter:alpha(Opacity=70);-moz-opacity:0.7;opacity:&0.7}&
这里设置了对对象盒子里的超链接内图片设置hover伪类半透明效果。
2、关键代码
鼠标移动到图片悬停时，图片变色滤镜效果：&&class=&div1&&href=&#&&src=&images/div-a-bg.png&&&&class=&div2&&href=&#&&src=&images/an.gif&&&
3、效果对比截图
CSS样式实现鼠标放图片上图片变化效果截图
四、在线演示与下载
1、在线演示
2、下载实例源代码压缩包
如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials&#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; ()&#8226; &#8226; ()&#8226; ()&#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; 必备HTML基础教程 Essential HTML Tutorials &#8226;
&#8226; () &#8226; () &#8226; () &#8226;
&#8226; () &#8226;
&#8226; () &#8226;
&#8226; 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 22:45
原创：本文www.divcss5.com DIVCSS5版权所有。最新文章NEWS&#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; CSS EFFECTS相关文章RELATED&#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; 热点文章HOT DIVCSS5.com 学习与资源分享平台