(css)鼠标移入或点击改变背景图片

(css)鼠标移入或点击改变背景图片

html

<div class="mapTip">
  <div
    v-for="(item, index) of legendList"
    :key="index"
    class="mapTipOne"
    :class="{ active: change === index }"
    @click="legendHandle(item, index)"
  >
    {{ item }}
  </div>
</div>

js

data() {
   return { 
     ...
     change: null,
   };
 },
methods: { 
	// 点击方法
	legendHandle(item, index) {
	  this.change = index;
	},
}

style

// 图例
.mapTip {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 14px;
  .mapTipOne {
    width: 150px;
    height: 30px;
    background: url("@/assets/images/home-image/mian-right-middle-list-bg0.png")
      no-repeat;
    background-position: 0px 0px;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 6px;
    cursor: pointer;
  }
  .active,
  .mapTipOne:hover {
    background: url("@/assets/images/home-image/mian-right-middle-list-bg1.png")
      no-repeat;
    background-position: 0px 0px;
    background-size: 100% 100%;
  }
}