用鼠标事件改变样式

原创 2018-12-31 00:17:22 272
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标移动事件</title> <style type="text/css"> .box{ width: 200px;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标移动事件</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
border: 1px solid red;
border-radius: 10px;
}
</style>
</head>
<body>
<div onmousemove="mover(this)" onmouseout="out(this)"></div>
<script type="text/javascript">
function mover(m){
m.style.backgroundColor="red";
m.style.borderRadius="100px";
}
function out(o){
o.style.backgroundColor="blue";
o.style.borderRadius="10px";
}
</script>
</body>
</html>


批改老师:天蓬老师批改时间:2018-12-31 16:13:54
老师总结:你的这个事件有点简单, 其实用伪类:hover, 给这个元素添加上, 也能实现这样的效果,不是吗?试试看

发布手记

热门词条