1、使用css实现鼠标滑动切换图片效果

<ul class="ullist"><li class="img1"><img src="../assets/image/icon/ic1.png" alt="" /></li><li class="img2"><img src="../assets/image/icon/ic2.png" alt="" /></li><li class="img3"><img src="../assets/image/icon/ic3.png" alt="" /></li>
</ul>// less
.ullist {display: flex;.img1:hover img {content: url(../assets/image/icon/ic1-1.png);}.img2:hover img {content: url(../assets/image/icon/ic2-1.png);}.img3:hover img {content: url(../assets/image/icon/ic3-1.png);}
}

2、使用鼠标事件实现切换效果

<template><div class="hv"><p>图片hover效果展示</p><ul class="ullist2"><li v-for="(item,index) of imgList" :key="index" @mouseover="changeIndex(index)" @mouseout="changeIndexBack(index)"><img :src="item.tp" alt="" v-show="!item.show"/><img :src="item.tp1" alt="" v-show="item.show"/><div class="tips" v-show="item.show"><!-- <router-link :to="item.url">你好厉害</router-link> --><a :href="item.url" target="_blank">你好厉害</a></div></li></ul></div>
</template><script>
export default {data() {return {imgList: [{tp:require('../assets/image/icon/ic1.png'),tp1:require('../assets/image/icon/ic1-1.png'),url:'https://www.baidu.com/',show:false,},{tp:require('../assets/image/icon/ic2.png'),tp1:require('../assets/image/icon/ic2-1.png'),url:'https://www.baidu.com/',show:false,},{tp:require('../assets/image/icon/ic3.png'),tp1:require('../assets/image/icon/ic3-1.png'), url:'https://www.baidu.com/',show:false,}],};},mounted() {},methods: {changeIndex(e){console.log(e,"移入");this.imgList[e].show = !this.imgList[e].show},changeIndexBack(e){console.log(e,"移除");this.imgList[e].show = !this.imgList[e].show},},
};
</script><style lang="less" scoped>
.ullist2{display: flex;.tips{padding: 20px 10px;background-color: aqua;}
}
</style>

全部代码

<template><div class="hv"><p>图片hover效果展示</p><ul class="ullist"><li class="img1"><img src="../assets/image/icon/ic1.png" alt="" /></li><li class="img2"><img src="../assets/image/icon/ic2.png" alt="" /></li><li class="img3"><img src="../assets/image/icon/ic3.png" alt="" /></li></ul><hr><ul class="ullist2"><li v-for="(item,index) of imgList" :key="index" @mouseover="changeIndex(index)" @mouseout="changeIndexBack(index)"><img :src="item.tp" alt="" v-show="!item.show"/><img :src="item.tp1" alt="" v-show="item.show"/><div class="tips" v-show="item.show"><!-- <router-link :to="item.url">你好厉害</router-link> --><a :href="item.url" target="_blank">你好厉害</a></div></li></ul></div>
</template><script>
export default {data() {return {imgList: [{tp:require('../assets/image/icon/ic1.png'),tp1:require('../assets/image/icon/ic1-1.png'),url:'https://www.baidu.com/',show:false,},{tp:require('../assets/image/icon/ic2.png'),tp1:require('../assets/image/icon/ic2-1.png'),url:'https://www.baidu.com/',show:false,},{tp:require('../assets/image/icon/ic3.png'),tp1:require('../assets/image/icon/ic3-1.png'), url:'https://www.baidu.com/',show:false,}],};},mounted() {},methods: {changeIndex(e){console.log(e,"移入");this.imgList[e].show = !this.imgList[e].show},changeIndexBack(e){console.log(e,"移除");this.imgList[e].show = !this.imgList[e].show},},
};
</script><style lang="less" scoped>
.ullist2{display: flex;.tips{padding: 20px 10px;background-color: aqua;}
}
.ullist {display: flex;.img1:hover img {content: url(../assets/image/icon/ic1-1.png);}.img2:hover img {content: url(../assets/image/icon/ic2-1.png);}.img3:hover img {content: url(../assets/image/icon/ic3-1.png);}
}
</style>

vue项目中鼠标悬浮图片实现hover效果切换图片-案例相关推荐

vue 项目中使用v-loading实现加载效果
当在vue项目中请求后台接口时,常常会使用 loding 过渡数据的加载时间. 如果 loading 作为一个全局的加载状态,应该写在项目中的App.vue中在el-table标签中添加v-load ...
SpringBoot+Vue项目中遇到Not allowed to load local resource图片路径问题的两种解决方案（在后端映射本地路径或将图片转base64返回给前端）
一.报错截图第一种解决方案后端映射本地路径编写MyConfig类 Java代码[MyWebConfig] package com.wechat.front.utils;import org.sp ...
vue项目中，将信息生成二维码图片保存为png格式并下载
生成二维码: https://blog.csdn.net/weixin_37861326/article/details/80362591 保存为png格式并下载: https://blog.csdn ...
vue 项目中使用svga格式动画图标效果 incorrect header check解决办法
1. 什么是SVGA SVGA 是一种跨平台的开源动画格式,同时兼容 iOS / Android / Web.SVGA 除了使用简单,性能卓越,同时让动画开发分工明确,各自专注各自的领域,大大减少动画 ...
layui单元格鼠标样式_Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法...
如下所示: var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/par ...
vue项目中，js根据文件名后缀，判断文件图片、视频、文档、pdf等类型的方法
vue项目中,在获得文件名信息,需要根据文件名的后缀来区分文件类型的方法如下:其中,文件后缀可自由拓展. // 根据文件名后缀区分文件类型/** @param: fileName - 文件名称* @ ...
svg图片在vue项目中的应用
svg图片在vue项目中的应用一.安装 svg-sprite-loader 插件 npm install svg-sprite-loader 二.基于 vue-cli2.x 项目 webpack 配 ...
vue项目中，图片无法显示时或者访问图片出现404时，显示默认图片，但默认图片路径出错
问题描述在vue项目中,同样的图片,设置在img的src中能正常显示设置在img的onerror中不能正常显示原因项目启动后, 图片的路径并不是我们写的路径了. 示例: 源代码: // 直 ...
在vue项目中实现图片打马赛克
在vue项目中实现图片打马赛克使用image-mosaic插件. 安装依赖 npm install image-mosaic -D 项目引用 // .vue 文件 <div id=" ...

vue项目中鼠标悬浮图片实现hover效果切换图片-案例

1、使用css实现鼠标滑动切换图片效果

2、使用鼠标事件实现切换效果

全部代码

vue项目中鼠标悬浮图片实现hover效果切换图片-案例相关推荐

最新文章

热门文章