当前位置:首页 > 建站教程 > 正文内容

css鼠标经过图片放大代码(css鼠标移动到图片上 图片放大显示)

建站教程2天前17

整个菜单6张图片,当hover状态也就是鼠标经过的时候,当前图片放大,可以遮住后面的图片,看到这里,就有了一点想法,整个过程全部由CSS来控制,先来看看页面的代码 插入代码 Image 1 Image 2 Image 3。

css鼠标经过图片放大代码(css鼠标移动到图片上 图片放大显示)

jquery #39a img#39hoverfunction thiscss height120px,width120px hover时增大 ,function thiscss height100px,width100px 离开时减小。

分别写一个onmouseover和onmouseout事件然后在事件里面加一个function,分别写想要放大的尺寸和缩小或复原的尺寸具体代码实现如下 var img = documentgetElementById#39img#39function bigger = #39400px#39 = #39400px#39 function smaller。

lt!DOCTYPE html PUBLIC quotW3CDTD XHTML 10 TransitionalENquot quotDTDxhtml1transitionaldtdquot Untitled Page li a img width20pxheight20px li a imghover width40px height40px。

1假设图片外层DIV的class为pic,图片的大小是400*300,html代码可以写成下面这样 2如果希望鼠标经过时图片的尺寸变成600*450,那么在css里面只要这样定义就行了picimghoverwidth600pxheight450px 3这个代码在ie6下会不生效,因为ie6不支持除A标签外的其他元素的hover伪类如果要在i。

用CSS3中的transfromscalex,y来放大,如下 margin0padding0 divbordersolid 1px #333width40pxheight40px div imgwidth40pxheight40pxtransitionall 03s div imghovertransfromscale2,2从中心放大两部。

扫描二维码推送至手机访问。

版权声明:本文由我的模板布,如需转载请注明出处。


本文链接:http://390c.top/post/70044.html

分享给朋友:

“css鼠标经过图片放大代码(css鼠标移动到图片上 图片放大显示)” 的相关文章

学校的定义及其功能(对于学校的定义)

学校的定义及其功能(对于学校的定义)

今天给各位分享学校的定义及其功能的知识,其中也会对对于学校的定义进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、学校系统的定义是什么? 2、学校体育功能是...

学校造句简单(什么的学校造句)

学校造句简单(什么的学校造句)

今天给各位分享学校造句简单的知识,其中也会对什么的学校造句进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、用英语我的学校造句 2、学校是什么又是什么造句...

企业房产税如何计算方法(企业房产税如何计算方法和容积率)

企业房产税如何计算方法(企业房产税如何计算方法和容积率)

本篇文章给大家谈谈企业房产税如何计算方法,以及企业房产税如何计算方法和容积率对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、公司房产税如何计算? 2、企业房产税如何计算...

装修123网站(装修123网官网)

装修123网站(装修123网官网)

今天给各位分享装修123网站的知识,其中也会对装修123网官网进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、装房装饰装修上什么网站? 2、网上怎么找装修...

濮阳房产网二手房信息网(濮阳房产网二手房出售信息网)

濮阳房产网二手房信息网(濮阳房产网二手房出售信息网)

本篇文章给大家谈谈濮阳房产网二手房信息网,以及濮阳房产网二手房出售信息网对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、想在濮阳市区买套房子? 2、濮阳哪个房地产网站好...

现在求职找哪个平台好(求职在哪个平台找最好?)

现在求职找哪个平台好(求职在哪个平台找最好?)

今天给各位分享现在求职找哪个平台好的知识,其中也会对求职在哪个平台找最好?进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、在哪个网站找工作最可靠? 2、求...