(css)鼠标移入或点击改变背景图片
(css)鼠标移入或点击改变背景图片https://i-blog.csdnimg.cn/direct/d27c0de111114c868cd0783179e22ad5.png
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%;
}
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]