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