用js 创建一个盒子,宽高为100px,背景颜色随意。当鼠标移入盒子时,盒子宽高变为250px。当鼠标移出盒子时,盒子宽高变回100px
时间: 2024-03-20 16:40:01 浏览: 17
好的,以下是用JavaScript创建一个满足你要求的盒子:
```html
<!DOCTYPE html>
<html>
<head>
<title>Box Example</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById("box");
box.addEventListener("mouseenter", function() {
box.style.width = "250px";
box.style.height = "250px";
});
box.addEventListener("mouseleave", function() {
box.style.width = "100px";
box.style.height = "100px";
});
</script>
</body>
</html>
```
以上代码会在页面中创建一个宽高为100px的盒子,并且当鼠标移入盒子时,盒子的宽高会变为250px,当鼠标移出盒子时,盒子的宽高会变回100px。
相关问题
创建一个盒子,宽高为100px,背景颜色随意。当鼠标移入盒子时,盒子宽高变为250px。当鼠标移出盒子时,盒子宽高变回100px
好的,以下是代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>盒子宽高变化</title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
background-color: #FCD12A;
transition: all 0.5s ease-in-out;
}
.box:hover {
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
```
该代码中使用了 HTML 和 CSS,其中 HTML 部分创建了一个类名为 `box` 的盒子,宽高为 100px,背景颜色为随意的颜色。CSS 部分使用了 `transition` 属性,当盒子宽高变化时过渡效果为 0.5s 的缓动效果。当鼠标移入盒子时,盒子宽高变为 250px;当鼠标移出盒子时,盒子宽高变回 100px。
2.创建一个盒子,宽高为100px,背景颜色随意。当鼠标移入盒子 时,盒子宽高变为250px。当鼠标移出盒子时,盒子宽高变回100 px。用js实现
好的,这是一个JavaScript代码实现你的需求:
```html
<div id="box"></div>
```
```css
#box {
width: 100px;
height: 100px;
background-color: #ccc;
}
```
```javascript
const box = document.getElementById('box');
box.addEventListener('mouseenter', () => {
box.style.width = '250px';
box.style.height = '250px';
});
box.addEventListener('mouseleave', () => {
box.style.width = '100px';
box.style.height = '100px';
});
```
我们使用JavaScript的 `addEventListener()` 方法来监听盒子的 `mouseenter` 和 `mouseleave` 事件,当鼠标移入盒子时,我们改变盒子的宽高为250px,当鼠标移出盒子时,我们改变它的宽高为100px。