<!DOCTYPE html>
<
html
lang=
"en">
<
head>
<
meta
charset=
"UTF-8">
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0">
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge">
<
title>Document</
title>
<
style>
*{
margin:
0;
padding:
0;
}
.abc{
width:
300
px;
height:
300
px;
border:
5
px
solid
red;
overflow:
hidden;
}
img{
width:
100
%;
height:
100
%;
transition: transform
1
s;
transform:
scale(
1);
-webkit-transition: transform
1
s;
}
</
style>
</
head>
<
body>
<
div
class=
"abc">
<
img
src=
"skate.jpg"
alt=
"">
</
div>
<
script>
var obj
=document.
getElementsByClassName(
"abc")[
0];
var img
=document.
getElementsByTagName(
"img")[
0];
obj.
onmouseover
=
function(){
img.style.transform
=
"scale(1.2)";
}
obj.
onmouseout
=
function(){
img.style.transform
=
"scale(1)";
}
</
script>
</
body>
</
html>
document.getElementByClassName 和 document.getElementByTagName 是 ie8 以及如下的版本无法做用的；orm