写一段js代码,在类名为feature的div元素被鼠标经过时,该元素实现浮动动画
时间: 2024-05-08 15:19:52 浏览: 110
用javascript onclick时显示一个浮动的div
好的,以下是您所需要的 JS 代码:
```javascript
const featureDiv = document.querySelector('.feature');
featureDiv.addEventListener('mouseover', () => {
featureDiv.style.transition = 'transform 0.5s ease-out';
featureDiv.style.transform = 'translateY(-10px)';
});
featureDiv.addEventListener('mouseout', () => {
featureDiv.style.transition = 'transform 0.5s ease-out';
featureDiv.style.transform = 'translateY(0px)';
});
```
这段代码会监听类名为 `feature` 的 div 元素的 `mouseover` 和 `mouseout` 事件,当鼠标经过该元素时,该元素会产生一个向上浮动的动画,当鼠标移出时,该元素会恢复原位。注意:该元素需要设置一个初始的 `transform` 值,否则动画效果可能不理想。
阅读全文