2.创建一个盒子,宽高为100px,背景颜色随意。当鼠标移入盒子 时,盒子宽高变为250px。当鼠标移出盒子时,盒子宽高变回100 PX。
时间: 2024-03-23 14:41:30 浏览: 60
好的,这是一个简单的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。
相关问题
2.创建一个盒子,宽高为100px,背景颜色随意。当鼠标移入盒子时,盒子宽高变为250px。当鼠标移出盒子时,盒子宽高变回100px。
好的,这是一个典型的使用 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` 属性可以让盒子的宽度和高度变化更加平滑。
1.创建一个三行三列的表格(边框粗细为1px,表格内容随意填写),一个按钮,当点击按钮时表格的背景颜色变成绿色。2.创建一个盒子,宽高为100px,背景颜色随意。当鼠标移入盒子时,盒子宽高变为250px。当鼠标移出盒子时,盒子宽高变回100px。
好的,下面是代码实现:
1. 创建一个三行三列的表格,一个按钮,点击按钮时表格背景颜色变绿色
```html
<!-- HTML代码 -->
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<button onclick="changeBgColor()">点击变绿色</button>
<script>
function changeBgColor() {
var table = document.querySelector("table");
table.style.backgroundColor = "green";
}
</script>
```
2. 创建一个盒子,鼠标移入时宽高变为250px,移出时宽高变回100px
```html
<!-- HTML代码 -->
<div class="box"></div>
<!-- CSS代码 -->
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
.box:hover {
width: 250px;
height: 250px;
}
</style>
```
这个盒子的宽高会在鼠标移入时变为250px,移出时变回100px,而盒子的背景颜色随意填写。
阅读全文