// html<ul class="hover-tabs">  <li data-name="红"></li>  <li data-name="橙"></li>  <li data-name="黄"></li>  <li data-name="绿"></li>  <li data-name="青"></li>  <li data-name="蓝"></li></ul>

// css$color-list: red orange yellow green greenyellow blue;.hover-tabs {  margin: 200px 100px;  display: flex;  justify-content: space-between;  width: 200px;  li {    position: relative;    padding: 2px;    border: 2px solid transparent;    border-radius: 100%;    width: 24px;    height: 24px;    background-clip: content-box;    cursor: pointer;    transition: all 300ms;    &::before,    &::after {      position: absolute;      left: 50%;      bottom: 100%;      opacity: 0;      pointer-events：none;      transform: translate3d(0, -30px, 0);      transition: all 300ms;    }    &::before {      margin: 0 0 12px -35px;      border-radius: 5px;      width: 70px;      height: 30px;      background-color: rgba(#000, .5);      line-height: 30px;      text-align: center;      color: #fff;      content: attr(data-name);    }    &::after {      margin-left: -6px;      border: 6px solid transparent;      border-top-color: rgba(#000, .5);      width: 0;      height: 0;      content: "";    }    @each $color in $color-list {      $index: index($color-list, $color);      &:nth-child(#{$index}) {        background-color: $color;        &:hover {          border-color: $color;        }      }    }    &:hover {      &::before,      &::after {        opacity: 1;        transform: translate3d(0, 0, 0);      }    }  }}