ToB企服应用市场:ToB评测及商务社交产业平台

标题: (css)鼠标移入或点击改变背景图片 [打印本页]
作者: 用多少眼泪才能让你相信    时间: 2024-12-20 02:24
标题: (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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4