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

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

建站教程1天前16

整个菜单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://60200875.com/post/70044.html

分享给朋友:

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

查房产信息怎么查询系统(房产信息怎么查询?)

查房产信息怎么查询系统(房产信息怎么查询?)

本篇文章给大家谈谈查房产信息怎么查询系统,以及房产信息怎么查询?对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、网上如何查个人房产信息 2、个人房产信息怎么查询 3...

求职简历表格图片(求职简历表格 word)

求职简历表格图片(求职简历表格 word)

本篇文章给大家谈谈求职简历表格图片,以及求职简历表格 word对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、个人简历表格模板 2、如何用word制作简历表格 3、...

技校是干嘛的学校(技校是什么学校是哪的)

技校是干嘛的学校(技校是什么学校是哪的)

本篇文章给大家谈谈技校是干嘛的学校,以及技校是什么学校是哪的对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、技校是什么? 2、技校是干什么的? 3、技校到底是干什么...

全国人才招聘网官网(中国人才招聘网官网)

全国人才招聘网官网(中国人才招聘网官网)

本篇文章给大家谈谈全国人才招聘网官网,以及中国人才招聘网官网对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、中国铁路人才招聘网网址 2、各大人才招聘的网址是多少 3...

家装网装修平台成都(装修 平台)

家装网装修平台成都(装修 平台)

本篇文章给大家谈谈家装网装修平台成都,以及装修 平台对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、成都一起装修网怎么样 2、成都哪家装修公司口碑最好 3、成都有哪...

郑州市房产管理局网站(郑州市房产管理局网站首页)

郑州市房产管理局网站(郑州市房产管理局网站首页)

本篇文章给大家谈谈郑州市房产管理局网站,以及郑州市房产管理局网站首页对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、郑州市房管局网站是什么? 2、郑州房产证信息怎么查询...