公司文化墙设计方案_石家庄工程职业学院_今日国际新闻最新消息十条_网络营销推广服务商

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

---

---

html

<div class="mapTip"><divv-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%;}
}