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

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

---

---

html

1. <div class="mapTip">
2.   <div
3.     v-for="(item, index) of legendList"
4.     :key="index"
5.     class="mapTipOne"
6.     :class="{ active: change === index }"
7.     @click="legendHandle(item, index)"
8.   >
9.     {{ item }}
10.   </div>
11. </div>

复制代码

js

1. data() {
2.    return {
3.      ...
4.      change: null,
5.    };
6. },
7. methods: {
8.         // 点击方法
9.         legendHandle(item, index) {
10.           this.change = index;
11.         },
12. }

复制代码

style

1. // 图例
2. .mapTip {
3.   position: absolute;
4.   top: 20px;
5.   left: 20px;
6.   font-size: 14px;
7.   .mapTipOne {
8.     width: 150px;
9.     height: 30px;
10.     background: url("@/assets/images/home-image/mian-right-middle-list-bg0.png")
11.       no-repeat;
12.     background-position: 0px 0px;
13.     background-size: 100% 100%;
14.     display: flex;
15.     justify-content: center;
16.     align-items: center;
17.     margin-bottom: 6px;
18.     cursor: pointer;
19.   }
20.   .active,
21.   .mapTipOne:hover {
22.     background: url("@/assets/images/home-image/mian-right-middle-list-bg1.png")
23.       no-repeat;
24.     background-position: 0px 0px;
25.     background-size: 100% 100%;
26.   }
27. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。