想让鼠标离开a元素移到div2上div2依旧显示,但是移到a元素和div2以外的地方就还是不显示
<a href="#">hover</a>
<div class="div2">
</div>
a:hover + .div2{
display: block;
animation: 0.5s div2 ease-in forwards;
}
@keyframes div2{
0%{height: 0; }
100%{height: 200px; }
}
.div2{
width: 200px;
background-color: red;
}
把 .div2
作为 a
标签的子元素吧,然后用 position: absolute
调整位置
<a href="#">hover
<div class="div2">
</div>
</a>
<style>
a:hover .div2{
display: block;
animation: 0.5s div2 ease-in forwards;
}
@keyframes div2{
0%{height: 10px; }
100%{height: 200px; }
}
.div2{
width: 200px;
background-color: red;
}
</style>
这样修改可以达到你要的效果
把a标签和div放在同一个div中,js设置这个父级div的hover方法,也可以把div放在a标签内,把a标签设置display: block;再用定位、浮动等调整位置。
竟然要这样,为何不把div放到A标签里