在vue项目中鼠标悬浮图片实现hover功能

ds在使用vue得过程中往往有些功能UI库里是没有得，这里就需要我们自己写写样式来使得页面更好看.

css中hover这个属性就有一个过渡得效果，下面笔者需要实现得功能

这个图是笔者刷博客时候看到的，功能类似这样的，附上代码：

  

            

              

                
              
            
            

              

                
              
              

                

                

                  
                    
                      {{
                        item.accountType
                      }}
                    
                  
                  下一步 
                
              
            
          

export default {
  data() {
    return {
      flag: false,
      plainOptions: {
        id: 8,
        ordinaryEnterprise: [
          { id: 1, accountType: '专业仓储' },
          { id: 2, accountType: '专业仓储' },
          { id: 3, accountType: '专业仓储' },
          { id: 4, accountType: '专业仓储' },
          { id: 5, accountType: '专业仓储' },
        ],
      },
      form: {},
      ids: null,
      checkFlag: true,
    }
  },
  created() {
    this.getRegisterAccountType()
  },
  methods: {
    //   划入
    changeIndex() {
      this.flag = true
    },
    //   划出
    changeIndexBack() {
      this.flag = false
    },

 .con-box {
        display: flex;
        justify-content: space-evenly;
        width: 100%;
        height: 353px;
        margin-top: 24px;
        & > :hover {
          box-shadow: 7px 11px 37px 1px #007bed66;
        }
        .box-left {
          width: 367px;
          height: 276px;
          text-align: center;
          line-height: 276px;
          border-radius: 4%;
          .box {
            width: 170px;
            height: 170px;
            line-height: 170px;
            text-align: center;
            margin: 30px auto;
            border-radius: 100%;
            background-color: #e3eefe;
            img {
              width: 140px;
              height: 140px;
            }
          }
        }

 这里笔者用了两种方法来实现hover功能，一个是css本身的样式hover属性，另一个是vue提供的方法 mouseover：滑入事件、mouseout：划出事件，这里笔者给你们看一下我实现的效果图：

 

 

 这里就是滑入滑出所实现的效果