CSS hover的时候，改变元素的样式

一、 

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

}