javascript - 如何使用鼠标悬停来正确显示列表？

Question

我需要显示一个包含几个链接的 div 当我完美地悬停在我的代码上时它会显示，但它没有给出 有机会点击现在的任何东西。它就在此时消失了 我移动鼠标怎么处理？

<template>
    <div @mouseover="position" class="hidden1 ">
        <a href="#" class="ss">Locations</a>
        <div class="div1" v-show="block">
            <div class="row pp">
                <a  href="#" class="col-4">East</a>
                <a href="#" class="col-4">West</a>
                <a href="#" class="col-4">South</a>
            </div>
        </div>
    </div>
</template>
      <script>
       export default{
           data() {
                return {
                    showHouse: false,
                    par: false,
                    block: false
                }
            },
            methods: {
                position() {
                    this.block = !this.block;

                }
            }
       }
      </script>

Answer 1

问题是，当鼠标移动时，mouseover 被调用的次数超出了您的预期。有一种情况是你应该使用 css 和悬停来完成此操作。但如果您需要在 Vue 中执行此操作，则可以使用 mouseenter 和 mouseleave，如下所示:

<template>
    <div @mouseenter="open" @mouseleave="close" class="hidden1 ">
        <a href="#" class="ss">Locations</a>
        <div class="div1" v-show="block">
            <div class="row pp">
                <a  href="#" class="col-4">East</a>
                <a href="#" class="col-4">West</a>
                <a href="#" class="col-4">South</a>
            </div>
        </div>
    </div>
</template>
<script>
export default{
    name: 'hover',
    data() {
        return {
            showHouse: false,
            par: false,
            block: false
        }
    },
    methods: {
        open() {
            this.block = true;
        },
        close() {
            this.block = false;
        }

    }
}
</script>