[BUG]为什么加载完毕后第一次鼠标划过没有过度效果，之后都有。求教?
<html>
<head>
<title>test</title>
<style type="text/css">
#div1{position:absolute;left:30%;top:10%;}
#p1{margin:10 300}}
</style>
</head>
<body>
<div id="div1">
<img src="http://att2.citysbs.com/fz/bbs_attachments/2010/month_1002/10020312250ba11460cb93cf95.jpg" id="pic" style="transition:1s">
<p id="p1">picture</p>
</div>
<script>
var pic=document.getElementById("pic");
function bigger(){
pic.style.width="700px";
pic.style.height="700px";
}
window.onload=abt;
function abt(){
pic.onmouseover=bigger;
pic.onmouseout=function(){
pic.style.width="650px";
pic.style.height="650px";
}
}
</script>
</body>
</html>
Howseeker浏览 1503回答 2
2回答
-
荼酒
img没有宽高 -
捡到一只蝉
因为第一次加载时，img的内联样式中没有设置width和height的值。 将img style设为"transition:1s;width:650px;height:650px;"即可。
随时随地看视频慕课网APP
Html/CSS
JavaScript
前端工具