前端 - a:hover时滑出div2,想在鼠标离开a到了div2上面该div2依旧显示,移到其它地方还是保留a:hover效果。
怪我咯
怪我咯 2017-04-17 11:44:34
0
4
621

想让鼠标离开a元素移到p2上p2依旧显示,但是移到a元素和p2以外的地方就还是不显示

<a href="#">hover</a>
    <p class="p2">
        
    </p>
a:hover + .p2{
        display: block;    
        animation: 0.5s p2 ease-in forwards;
        
    }
    @keyframes p2{
        0%{height: 0; }
        100%{height: 200px; }
    } 
    .p2{
        width: 200px;
        background-color: red;
        
    }
怪我咯
怪我咯

走同样的路,发现不同的人生

Antworte allen(4)
黄舟

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

伊谢尔伦
<a href="#">hover
<p class="p2">

</p>
</a>
<style>
  a:hover .p2{
    display: block;
    animation: 0.5s p2 ease-in forwards;

  }
  @keyframes p2{
    0%{height: 10px; }
    100%{height: 200px; }
  }
  .p2{
    width: 200px;
    background-color: red;

  }
</style>

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

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

小葫芦

竟然要这样,为何不把p放到A标签里

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage