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

最新推荐文章于 2024-08-01 14:25:01 发布

✎﹏ℳ๓₯㎕

最新推荐文章于 2024-08-01 14:25:01 发布

阅读量6k

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_43474235/article/details/124230739

版权

本文介绍了如何在Vue项目中利用CSS hover属性和事件监听（mouseover/mouseout）创建过渡效果，展示了具体代码示例，用于在元素滑入和滑出时切换显示内容。通过调整CSS样式和Vue方法，实现了元素的平滑转换，增强了页面交互体验。

摘要由CSDN通过智能技术生成

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

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

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

  <div class="con-box">
            <div class="box-left">
              <div class="box" @click="handleOk(plainOptions.id)">
                <img :src="require('@/assets/register_img/titles1.png')" alt="" />
              </div>
            </div>
            <div class="box-right" @mouseover="changeIndex()" @mouseout="changeIndexBack()">
              <div class="box" v-show="!flag">
                <img :src="require('@/assets/register_img/titles2.png')" alt="" />
              </div>
              <div class="box-content" v-show="flag">
                <div class="box-cent-title"></div>
                <div class="box-title-center">
                  <a-form-model :model="form">
                    <a-checkbox-group v-model="form.checkboxIds">
                      <a-checkbox v-for="(item, int) in plainOptions.ordinaryEnterprise" :key="int" :value="item.id">{{
                        item.accountType
                      }}</a-checkbox>
                    </a-checkbox-group>
                  </a-form-model>
                  <a-button type="primary" @click="nextStep()">下一步 </a-button>
                </div>
              </div>
            </div>
          </div>

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：划出事件，这里笔者给你们看一下我实现的效果图：