一、
<ul><li><img src="../../assets/logo.png" height="40px" alt="智家云" />智家云</li><li style="margin-left: 60px"><a href="#">产品 <a-icon class="img" type="down" /></a></li><li><a href="#">解决方案 <a-icon type="down" class="img" /></a></li></ul>
该变箭头的样式
ul > li:nth-of-type(2) > a:hover>.img { /*此处必须要加 > 因为他们是父子关系*/transform: rotate(180deg);}ul > li:nth-of-type(3) > a:hover>.img {transform: rotate(180deg);}.img {transition: all 0.5s ease-in-out;}
二、
<ul><li><img src="../../assets/logo.png" height="40px" alt="智家云" />智家云</li><li style="margin-left: 60px"><a href="#">产品 </a><a-icon class="img" type="down" /></li><li><a href="#">解决方案 <a-icon type="down" class="img" /></a></li></ul>
ul > li:nth-of-type(2) > a:hover~.img { /*兄弟之间，此处必须加 ~ */transform: rotate(180deg);}ul > li:nth-of-type(3) > a:hover>.img {transform: rotate(180deg);}.img {transition: all 0.5s ease-in-out;}
