css控制图片的大小,比如鼠标移动到图片上时,显示上半部分,否则显示下半部分。谢啦!急啊
4个回答
展开全部
可以实现。假设你的图片大小为100x100px
HTML为:
<div class="imgbox"><img src="你的图片路径" /></div>
CSS为:
.imgbox { height:50px;/*图片大小的一半*/ width:100px; position:relative; overflow:hidden;}
.imgbox img { width:100px; height:100px; position:absolute; top:-50px; }
.imgbox:hover img { top:0px; }
以上代码在CHROME等现代浏览器里测试通过
但是IE6/7对hover伪类的支持是有问题的,一种是百度IE6的hover处理方法,另外一种更简便的就是用js和jquery了,CSS中的.imgbox:hover img { top:0px; }改为
.imgbox img.alt { top:0px; }
脚本编写.imgbox产生onMouseOver事件时,给里面的img加上class="alt"属性;onMouseOut事件时删除之
你会写jquery的话直接用animate变化top值就可以产生图片上下滑动的效果
HTML为:
<div class="imgbox"><img src="你的图片路径" /></div>
CSS为:
.imgbox { height:50px;/*图片大小的一半*/ width:100px; position:relative; overflow:hidden;}
.imgbox img { width:100px; height:100px; position:absolute; top:-50px; }
.imgbox:hover img { top:0px; }
以上代码在CHROME等现代浏览器里测试通过
但是IE6/7对hover伪类的支持是有问题的,一种是百度IE6的hover处理方法,另外一种更简便的就是用js和jquery了,CSS中的.imgbox:hover img { top:0px; }改为
.imgbox img.alt { top:0px; }
脚本编写.imgbox产生onMouseOver事件时,给里面的img加上class="alt"属性;onMouseOut事件时删除之
你会写jquery的话直接用animate变化top值就可以产生图片上下滑动的效果
展开全部
你说用CSS,倒是有一种很笨的方法,把一张图片切片成两部分,然后用HTML+CSS拼接起来,上面那部分做一个,用hover,下面那部分做一个,,也用hover,你说用CSS来做,也就只有这种方法了!
不然的话最好用JS或者JQUERY
不然的话最好用JS或者JQUERY
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
这个一般用js控制啊,用css怎么控制啊,hover?这个也不行啊。
用js处理吧,js行吗?
用js处理吧,js行吗?
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
这怎么能用css控制呢,用jQuery啊亲
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询