浮动变蓝效果

浮动变蓝效果

代码

<div class="f">
        <div class="f-a">
          <span class="spa">联系合规伙伴</span>
          <span class="spb">CONTACT</span>
          <div class="spc" @click="changeContact">
            <span class="spd">换一批</span>
            <img src="../../assets/images/cha.png" alt />
          </div>
        </div>
        <div class="f-b">
            //鼠标浮动变蓝
          <div
            class="fb-lef"
            v-for="(item, index) in contactList"
            :key="index"
            :class="{'active-bg':curBg===index}"
            @mouseover="curBg=index"
          >
            <img :src="item.avatar" alt />
            <div class="spc">
              <dl>
                <dd class="spa">{{item.displayname}}</dd>
                <dd class="spb">{{item.tel}}</dd>
              </dl>
            </div>
          </div>
        </div>
      </div>

数据

data(){
    return{
        //
         curBg: -1,
    }
}

样式

.active-bg {
  &:hover {
      //背景为蓝色
    background: #edf6ff;
  }
}

示例