a:hover时滑出div2，想在鼠标离开a到了div2上面该div2依旧显示，移到其它地方还是保留a:hover效果。

Question

想让鼠标离开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;
        
    }

Answer 1

把 .div2 作为 a 标签的子元素吧，然后用 position: absolute 调整位置

Answer 2

<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>

这样修改可以达到你要的效果

Answer 3

把a标签和div放在同一个div中，js设置这个父级div的hover方法，也可以把div放在a标签内，把a标签设置display: block;再用定位、浮动等调整位置。

Answer 4

竟然要这样，为何不把div放到A标签里