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

 

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

上一篇:几个C语言题与答案


下一篇:[Python]网络爬虫(11):亮剑!爬虫框架小抓抓Scrapy闪亮登场!