实习小记3.27（hover变色有两个颜色）

  <ul className={styles.list}>
            {item.itemInfos.map((iteminfo, ind) => (
              <a key={ind} href={iteminfo.link}>
                <li className={styles.listItem}>{iteminfo.desc}</li>
              </a>
            ))}
          </ul>

 .list {
    display: flex;
    flex-direction: row;
    font-weight: 400;
    font-size: 16px;
    color: #1e1e21;
    .listItem {
      padding-right: 20px;
      &:hover {
        color: #ff9000;
      }
    }
  }

代码解释：以上代码这样写会有问题：两个iteminfo.desc快速转换的时候，hover颜色中间会有一个蓝色过渡

问题原因：因为添加hover是给<li>标签添加的，而外面有<a>标签包裹着。进入的时候会先进入a标签，而<a>标签有默认hover颜色（蓝色），之后再进入<li>标签变成橙色

解决办法：className={styles.listItem}改为添加到<a>标签上