用css怎么做DW5的当鼠标经过图片图片放大离开变回原形的效果？

2023-03-04 04:29:02html-css014

用css怎么做DW5的当鼠标经过图片图片放大离开变回原形的效果？,第1张

1、假设图片外层DIV的class为pic，图片的大小是400*300，html代码可以写成下面这样:

<divclass="pic">

<imgsrc="abc.jpg"width="400"height="300"/>

</div>

2、如果希望鼠标经过时图片的尺寸变成600*450，那么在css里面只要这样定义就行了:picimg:hover{width:600pxheight:450px}

3、这个代码在ie6下会不生效，因为ie6不支持除A标签外的其他元素的:hover伪类。如果要在ie6下兼容，只需要把div改成a标签，也就是在图片上加一个超链接，然后给它加上一个class即可。

鼠标

鼠标是计算机的一种输入设备，分有线和无线两种，也是计算机显示系统纵横坐标定位的指示器，因形似老鼠而得名"鼠标"(港台作滑鼠)。

源码如下

<!DOCTYPE html>

<html>

<head>

<title>CSS3鼠标滑过图片放大特效DEMO演示</title>

<style>

html{font-family:sans-serif-ms-text-size-adjust:100%-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-blockvertical-align:baseline}audio:not([controls]){display:noneheight:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2emmargin:0.67em 0}mark{background:#ff0color:#000}small{font-size:80%}sub,sup{font-size:75%line-height:0position:relativevertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-boxbox-sizing:content-boxheight:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospacefont-size:1em}button,input,optgroup,select,textarea{color:inheritfont:inheritmargin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:buttoncursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-moz-box-sizing:border-boxbox-sizing:border-boxpadding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield-moz-box-sizing:content-boxbox-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0margin:0 2pxpadding:0.35em 0.625em 0.75em}legend{border:0padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapseborder-spacing:0}td,th{padding:0}

</style>

<style>

@import url("http://fonts.googleapis.com/css?family=Lato")

* {

margin: 0

padding: 0

box-sizing: border-box

}

body {

font: 14px/1 Lato, sans-serif

color: #555

background: #eee