超简单！实现Web设计中鼠标划过盒子加深阴影的代码揭秘

以下是一种常用的实现方法，通过添加鼠标悬停时的样式来改变盒子阴影的深度： HTML代码: ```html <div class="box"> <h1>这是一个盒子</h1> </div> ``` CSS代码: ```css .box { width: 200px; height: 200px; background-color: #f2f2f2; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 初始阴影效果 */ transition: box-shadow 0.3s ease; /* 添加过渡效果平滑过渡 */ /* 当鼠标悬停在盒子上时的样式 */ &:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* 加深阴影效果 */ } } ``` 这段代码定义了一个宽高为 200px 的盒子，并定义了初始的阴影效果为 0 2px 4px 的阴影。然后使用 `transition` 属性添加一个 `0.3s` 的过渡效果。 当鼠标悬停在盒子上时，使用 `:hover` 伪类选择器添加一个新的阴影效果，将盒子的阴影深度加深为 0 4px 8px。这样当鼠标移出盒子时，过渡效果会使阴影平滑地恢复初始状态。 ######[AI写代码神器 | 526点数解答 | 2024-06-20 13:06:03]