帮我创建一个html鼠标响应网页
时间: 2023-10-29 12:06:16 浏览: 33
以下是一个简单的HTML鼠标响应网页的示例:
<!DOCTYPE html>
<html>
<head>
<title>鼠标响应网页</title>
<style>
#box {
width: 200px;
height: 200px;
background-color: #ccc;
margin: 50px auto;
text-align: center;
line-height: 200px;
font-size: 24px;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">点击我</div>
<script>
var box = document.getElementById("box");
box.addEventListener("mouseover", function() {
box.style.backgroundColor = "blue";
});
box.addEventListener("mouseout", function() {
box.style.backgroundColor = "#ccc";
});
box.addEventListener("click", function() {
box.innerHTML = "你点击了我";
});
</script>
</body>
</html>
该示例中创建了一个200x200像素的灰色方框,当鼠标悬停在方框上时,背景颜色变为蓝色;当鼠标移出时,背景颜色恢复为灰色;当点击方框时,文本内容变为“你点击了我”。