hover状态下改变图片颜色的方式悬停图片切换；css变量；悬停svg图片改变颜色；VUE

由外部json文件，按照配置方式引入图片路径时，需要一些值得注意的语法来动态引入和改变图片

1、图片路径设置，按照img标签动态引入图片

<img src=''/>

<img src="@/assets/logo.png"/>

<img :src="require('@/path/'+item['icon'])" width="100%" height="100%" :title="item['label']" alt=''/>

2、在动态引入非svg图片后，需要设置hover状态和正常状态不同的路径，例如俩不同颜色的图片，本例一中为高度和宽度

<div :style="{ '--Width': xxWidth, '--Height': xxHeight }"></div>

.map-swiper {

    height: var(--Height);

    width: var(--Width);

}

另外一种比较好的方法是，在原div中同时引入俩img，不同路径。每个图片配不同的class，在hover时改变display来设置是否显示。

display:block;

display:none;

3、使用svg图片，作为Img的src文件引用，在hover时设置阴影来改变颜色。用src引入svg的情况下不适合改变svg的fill属性

思路为将图片先向右偏移到视线之外，再设置其偏移阴影正好投影到原位置。

<img src="@/xx/yy.svg" width="100%" height="100%"  alt=''/>

#parentcss:hover{

    img{

        position: relative;

        left: 5000px;

        filter: drop-shadow(darkcyan -5000px 0);

    }

}

巴特西