一张图片实现选中效果

<div :class="{'focusImgBc':hoverService==service.quickSkip_title}">                          <i                              :class="{'focusImg':hoverService==service.quickSkip_title}"                              :style="quickIconStyle(service)"                              class="service-img"                          ></i>                      </div>

 

、

一张图片实现鼠标选中效果

<div :class="{'focusImgBc':hoverService==service.quickSkip_title}">                          <i                              :class="{'focusImg':hoverService==service.quickSkip_title}"                              :style="quickIconStyle(service)"                              class="service-img"                          ></i>                      </div>

quickIconStyle(service) {               let src = 'background:' +                       (service.quickSkip_imgApiPath ?                               ('url(' + this.BACKEND_ROOT_URL + '/api/global_config/home_config/imgs/' + service.quickSkip_imgApiPath + '?token=' + this.$store.state.token.replace(' ', '%20'))                               : ('url(' + require('./../../../public/images/Home/geo-data-hover.png')))                       + ')0 0 /100% 100%;';                 let makrwb = '-webkit-mask:' +                       (service.quickSkip_imgApiPath ?                               ('url(' + this.BACKEND_ROOT_URL + '/api/global_config/home_config/imgs/' + service.quickSkip_imgApiPath + '?token=' + this.$store.state.token.replace(' ', '%20'))                               : ('url(' + require('./../../../public/images/Home/geo-data-hover.png')))                       + ')-1px -1px / calc(100% + 2px) calc(100% + 2px)';               return src + makrwb;           },

.focusImgBc {      width: 70px;      height: 70px;      display: inline-block;      background-color #007fea      border-radius 50%    }    .focusImg {      background-size: 0 !important      background-color: #fff9fc !important  }

原理：将图片作为遮罩，修改背景色，图片透明区域会露出其父容器的背景色（代码中使遮罩偏移1px,去白边）