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

浏览:41日期:2022-06-15

问题描述

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

<a href='https://www.6hehe.com/wenda/5841.html#'>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; }

问题解答

回答1:

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

回答2:

<a href='https://www.6hehe.com/wenda/5841.html#'>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>这样修改可以达到你要的效果回答3:

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

回答4:

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

相关文章: