请帮我写一个动画鼠标移入type下方出现子级,带动画
时间: 2024-03-11 18:47:04 浏览: 13
好的,您需要使用HTML、CSS和JavaScript来实现这个效果。
首先,在HTML中创建一个具有子级的type元素:
```html
<div class="type">
Type
<ul class="sub-type">
<li>Sub Type 1</li>
<li>Sub Type 2</li>
<li>Sub Type 3</li>
</ul>
</div>
```
接下来,在CSS中设置type和sub-type的样式:
```css
.type {
position: relative;
display: inline-block;
font-size: 24px;
padding: 10px;
cursor: pointer;
}
.sub-type {
position: absolute;
top: 100%;
left: 0;
width: 200px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 10px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.sub-type li {
margin: 10px 0;
font-size: 18px;
}
```
最后,在JavaScript中编写事件处理程序:
```javascript
const type = document.querySelector('.type');
const subType = document.querySelector('.sub-type');
type.addEventListener('mouseenter', () => {
subType.style.opacity = 1;
subType.style.visibility = 'visible';
});
type.addEventListener('mouseleave', () => {
subType.style.opacity = 0;
subType.style.visibility = 'hidden';
});
```
现在,当鼠标移动到type元素上时,会以动画形式显示子级。当鼠标离开时,子级会以动画形式隐藏。