vue鼠标悬停更改图片

悬停

html

 <div id="app"><second></second></div>
<template id="tmp2"><div id="fotter"><ul><li v-for="(item, index) in fotter" :key="index"@mouseover="over(index)" @mouseout="out(index)":class="{name:index==color}"><img :src="item.url1"><p>{{item.name}}</p></li></ul></div></template>

css

        *{margin: 0;padding: 0;list-style: none;}         #fotter{width: 100%;position: fixed;bottom: 0;height: 45px;border-top: 1px gray solid;}#fotter ul{display: flex;height: 100%;}#fotter li{width: 20%;display: flex;flex-direction: column;justify-content: center;align-items: center;}#fotter img{width: 30px;}.name{color: red;}

const vm = new Vue({el:'#app',components:{second:{template:'#tmp2',data(){return {fotter:[// url1为原图片，url2为悬停图片{url1:'./img/1.png',url2:'./img/6.png',transfer:'',name:'首页'},{url1:'./img/2.png',url2:'./img/7.png',transfer:'',name:'搜索'},{url1:'./img/3.png',url2:'./img/8.png',transfer:'',name:'发现'},{url1:'./img/4.png',url2:'./img/9.png',transfer:'',name:'购物车'},{url1:'./img/5.png',url2:'./img/10.png',transfer:'',name:'我的'},],// 不能为空，空值也相当于0，会在事件没有触发时就会更改字体颜色color:'null'}},methods:{//鼠标悬停时，传入悬停的li下标over(e) {//让url1变成url2的地址，因为src已经引入url1的地址//悬停时便改变图片地址，完成悬停改变图片功能，//但是为了鼠标移走后，图片能够还原回来，则url1的地址必须得在//所以在对象里面创建一个空的'中转站'transfer用来储存url1的值this.fotter[e].transfer=this.fotter[e].url1;this.fotter[e].url1=this.fotter[e].url2;//使属性color等于悬停的li的下标，// 这样当悬停的时候li的下标与属性相等时// 便更改文字颜色this.color=e},out(e){//因为此时'中转站'transfer里面储存的使url1的地址，也就是未悬停前的地址// 令url1的值重新变为原地址this.fotter[e].url1=this.fotter[e].transfer;//移走后li下标与color不相等，便不更改文字颜色//此处不能为空，因为为空默认为0，相当于移出鼠标后，li[0]依然会更改颜色this.color='null'},},}}});
</script>

vue鼠标悬停更改图片相关推荐

Vue中鼠标悬停更换图片/文字内容，动态展示/修改某些属性
Vue中鼠标悬停更换图片/文字内容,动态展示/修改某些属性鼠标悬停时:@mouseenter 鼠标离开时:@mouseleave 利用以上来绑定相应方法,例如: <div @mouseleav ...
用vue实现，鼠标悬停放大图片，根据鼠标位置倾斜图片网页源码
大家好,今天给大家介绍一款,用vue实现的,鼠标悬停放大图片,并根据鼠标位置倾斜图片前端网页源码(图1).送给大家哦,获取方式在本文末尾. 图1 鼠标悬停放大图片,鼠标移动图片就会进行相应角度的倾斜, ...
vue鼠标悬停出现悬浮框（简易版实现）
vue鼠标悬停出现悬浮框(简易版实现) 使用一个变量来控制悬浮框显示和隐藏,注意:这是简易版实现,其他功能需自行开发: 代码如下: <template><div><div ...
rp原型中鼠标悬停显示图片_悬停状态原型4种方式
rp原型中鼠标悬停显示图片 There are tons of options available for UX designers to prototype a user experience an ...
css照片翻转动画（当鼠标悬停在图片上方时图片翻转）
css照片翻转动画第一次写博客也不知道怎么排版有什么建议私信我 - 鼠标悬停时图片旋转到垂直于视线的90度位置文字介绍旋转在垂直于视线的位置这是html代码 <!DOCTYPE h ...
鼠标悬停“改变”图片
最近准备学习vue.js,看到vue网站下面的赞助商模块做的很好玩,当鼠标悬停的时候,图片会"改变".看过它的代码之后才发现并不是修改了图片路径,只是通过img:hover更改了图 ...
鼠标悬停显示图片html5,JavaScript 鼠标悬停图片，显示隐藏文本
Unsplash 当我们在浏览网页的时候,描述性的文本通常不会跟在图片之后,而是当我们将鼠标移至图片上时,才会将文本显示出来,这样的好处是,以突显图片为主,并节省布局空间 HTML 结构如下世界上最 ...
HTML5 心形图片墙鼠标悬停放大图片
转自:http://www.codefans.net/jscss/code/5025.shtml (有Demo) 由jquery和HTML5技术共同实现的图片墙效果,鼠标悬停即放大效果,单就把图片排 ...
html鼠标悬停多个图片变灰,怎样用CSS让鼠标悬停在图片上图片变灰
我们常常在网页中看到这样一种效果,当你的鼠标移动到图片上的时候,图片变灰,或者变暗,这实际是图片被CSS设置为半透明样式.下面就给大家做一个实例看一下这种效果怎么实现a:hover img{filte ...

vue鼠标悬停更改图片

vue鼠标悬停更改图片相关推荐

最新文章

热门文章