前端小技巧

根据前缀进行选择

img[id^="img_"] {
  width: 40px;
  position: absolute;
  z-index: 0;
}

根据后缀进行选择

img[id$="_0"] {
  padding: 30px;
}

使用*匹配内容

vue中使用v-for给元素id批量命名

        <div
          class="div_container_bottom_left_img"
          v-for="(item,index) in 3" :key="index"
          @mouseenter="mouseOver(index)"
          @mouseleave="mouseOut(index)"
        >
          <img
            :id="'img_'+index+'_0'"
            src="../assets/like.jpg"
            @click="clickLike()"
          />
          <img
            :id="'img_'+index+'_1'"
            src="../assets/collection.jpg"
            @click="clickCollection"
          />
          <img
            :id="'img_'+index+'_2'"
            src="../assets/download.jpg"
            @click="clickDownload"
          />
          <img
            id="imgo"
            src="../assets/bj5.jpg"
          />
        </div>

通过js给z-index设置值

mouseOver(i) {
      document.getElementById('img_'+i+'_0').style.zIndex = 999;
    },
mouseOut(i) {
      document.getElementById('img_'+i+'_0').style.zIndex = 0;
    },