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

àì夳堔傛蜴生んèń 2022-10-15 14:50 320阅读 0赞

![20210525180109257.gif][]

# 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">
                  
                  <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">
                  
                  <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>

[20210525180109257.gif]: /images/20221014/c7759e570b7741029338c99c60dfa46a.png