问题描述
<a href='https://www.6hehe.com/wenda/5851.html#'>hover<p class='p2'> <p>qwerqwerqwer</p></p> </a>
a:hover .p2{animation: 0.5s p2 ease-in forwards;} a:hover p{display: block; } @keyframes p2{0%{height: 0; }100%{height: 200px; } } .p2{width: 200px;background-color: red; } p{display: none; }
问题解答
回答1：a:hover .p2{animation: 2.5s p2 ease-in forwards;} a:hover p{display: block;animation: 0.5s p1 ease-in forwards; animation-delay:2.5s; } @keyframes p2{0%{height: 0; }100%{height: 200px; } } @keyframes p1{0%{opacity: 0; }100%{opacity: 1; } } .p2{width: 200px;background-color: red; } p{opacity: 0;display: none; }回答2：
a:hover .p2{animation: 0.5s p2 ease-in forwards;} a:hover p{animation: 0.5s p ease-in forwards;} @keyframes p2{0%{height: 0; }100%{height: 200px; } } @keyframes p{ 0%{opacity:0} 100%{opacity:1} } .p2{width: 200px;background-color: red; } p{display: block;opacity:0; }
给p也加动画
