2.创建一个盒子,宽高为100px,背景颜色随意。当鼠标移入盒子时,盒子宽高变为250px。当鼠标移出盒子时,盒子宽高变回100px。
时间: 2024-03-16 21:47:08 浏览: 15
好的,这是一个典型的使用 JavaScript 和 CSS 实现的交互效果。可以使用如下代码实现:
HTML 代码:
```html
<div id="box"></div>
```
CSS 代码:
```css
#box {
width: 100px;
height: 100px;
background-color: #eee;
transition: all 0.3s ease;
}
#box:hover {
width: 250px;
height: 250px;
}
```
JavaScript 代码:
```javascript
var box = document.getElementById('box');
box.onmouseover = function() {
this.style.width = '250px';
this.style.height = '250px';
}
box.onmouseout = function() {
this.style.width = '100px';
this.style.height = '100px';
}
```
当鼠标移入盒子时,JavaScript 代码会监听 `onmouseover` 事件,然后修改盒子的宽度和高度;当鼠标移出盒子时,JavaScript 代码会监听 `onmouseout` 事件,然后将盒子的宽度和高度还原成原来的大小。CSS 代码中的 `transition` 属性可以让盒子的宽度和高度变化更加平滑。
相关问题
2.创建一个盒子,宽高为100px,背景颜色随意。当鼠标移入盒子 时,盒子宽高变为250px。当鼠标移出盒子时,盒子宽高变回100 PX。
好的,这是一个简单的HTML和CSS代码实现你的需求:
```html
<div class="box"></div>
```
```css
.box {
width: 100px;
height: 100px;
background-color: #ccc;
transition: all 0.3s ease-in-out;
}
.box:hover {
width: 250px;
height: 250px;
}
```
我们使用CSS的 `transition` 属性来实现盒子宽高变化的动画效果。当鼠标移入盒子时,`.box` 元素的宽高会由原来的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。