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。

2.创建一个盒子，宽高为100px，背景颜色随意。当鼠标移入盒子时，盒子宽高变为250px。当鼠标移出盒子时，盒子宽高变回100px。

好的，以下是代码实现： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子大小变化</title> <style> .box { width: 100px; height: 100px; background-color: #F44336; transition: all 0.5s; } </style> </head> <body> <div class="box" onmouseover="changeSize(this)" onmouseout="changeSize(this)"></div> <script> function changeSize(box) { if (box.style.width == "100px") { box.style.width = "250px"; box.style.height = "250px"; } else { box.style.width = "100px"; box.style.height = "100px"; } } </script> </body> </html> ``` 代码中创建了一个宽高为100px的盒子，并设置其背景颜色。使用 CSS 的 `transition` 属性实现了平滑的动画效果。通过 JavaScript 的 `onmouseover` 和 `onmouseout` 事件监听器实现了鼠标移入移出盒子时触发的函数。函数中判断当前盒子的宽度是否为100px，是则将其宽高改为250px，否则改为100px。

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。

阅读全文

2.创建一个盒子，宽高为100px，背景颜色随意。当鼠标移入盒子 时，盒子宽高变为250px。当鼠标移出盒子时，盒子宽高变回100 px。用js实现