创建一个盒子,宽高为100px,背景颜色随意。当鼠标移入盒子时,盒子宽高变为250px。当鼠标移出盒子时,盒子宽高变回100px。
时间: 2023-08-29 13:06:19 浏览: 91
盒子尺寸1
以下是一个创建盒子,实现鼠标移入和移出后改变盒子宽高的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>盒子示例</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: yellow;
transition: width 1s, height 1s;
}
.box:hover {
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
```
在这个例子中,我们使用了 CSS 中的 `hover` 伪类来实现鼠标移入和移出盒子的效果。当鼠标移入盒子时,盒子的宽高会变为 250px,而当鼠标移出盒子时,盒子的宽高会恢复为 100px。我们还使用了 CSS 的 `transition` 属性来定义宽高变化的过渡效果,使盒子的变化更加平滑。
阅读全文