Vue.js 2 でマウスの入力、マウスの離脱、およびコンテンツのドロップダウン メニューが消えない問題に対処する方法

Question

皆さん、こんにちは。@mouseenter と @mouseleave を使用して、ドロップダウン コンテンツを非表示にするのではなく制御する方法を知りたいです

<div class="wrapper">
  <div class="link" @mouseenter="show = true" @mouseleave="show = false">project</div>
  <div class="content" v-if="show">これはコンテンツです</div>
</div>

このようなことを試してみましたが、コンテンツにカーソルを合わせたり、コンテンツを操作したりするときにどう処理すればよいかわかりません。助けていただければ幸いです。よろしくお願いします。

Answer 1

@mouseleave イベントを content に移動してみます:

リーリー リーリー リーリー