css hover鼠标悬停图片宽度变化

效果：

页面：

<ul class="homeSec04Wrap" :class="{'smallwrapCss' : onwrap !== -1}">
  <li class="defaultCss" v-for="(item,index) in projects" :key="index"
    :class="{'bigwrapCss': onwrap == index}"
    @mouseenter="projectin(index)"
    @mouseleave="projectout()">
      <a :href="item.url" target="_blank">
        <div class="itemTit">
          {{ item.title }}
        </div>
        <img class="itemPic"
          :src="item.thumb1">
        </img>
        <div class="itemCont">
          {{ item.artDesc }}
        </div>
      </a>
  </li>
</ul>

data(){
  return {
    projects:[],
    onwrap: -1,  //默认显示defaultCss样式
  }
}

事件：

methods: {
  // 鼠标进入事件
  // 当前hover元素bigwrapCss生效,未选选中元素smallwrapCss生效
  projectin(index) {
      this.onwrap = index
    },
  // 鼠标移出事件，smallwrapCss失效，所有元素恢复defaultCss
  projectout() {
    this.onwrap = -1
  }
}

样式：

// 默认样式
.defaultCss{
  width: 20%;  // !所有元素的默认宽度
  height: 65%;
  float:left;
  background-color: rgb(2, 99, 180);
  position: relative;
  text-align: center;
  top: 50%;
  transform: translate(0%, -50%);
  transition: all 0.3s linear;
}

// hover时，所有元素宽度由 20% 变为 17.5%
.homeSec04Wrap.smallwrapCss .defaultCss{
  width: 17.5%;
}

// hover时，当前选中元素宽度由 20% 变为 30%
.homeSec04Wrap.smallwrapCss .defaultCss.bigwrapCss {
  width: 30%;
  height: 100%;
}