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

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

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

<img src=''/>

• 路径不引入变量，此时的@路径代表src文件夹，后面的部分可以按需修改，vue工程的引入路径方法

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

• HTML图片路径中有变量，由vue模板语法产生，如v-for引入的item。需要引入requeire语法

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

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

• 在vue模板中使用动态变量从style中引入以被定义好的变量，再使用var变量在css中指定（会引入超多变量)

<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);
    }
}