javascript - UL/LIアイテム内にクローズリンクを追加する方法

Question

次のようなコードがあります。

<ul id="ulPersonal">
      <li class="break eTime">
        <p>Manage your time card.</p>
        <div id="dEtime">
          some content
        </div>
       </li>
</ul>

div はli、jquery で項目にカーソルを合わせたときにのみ表示されます。

    $('#dEtime').hide(); //initially hide the div...

    //when the user hovers show the div
    $(".eTime").hover(function () {
        $('#dEtime').fadeIn('slow');
    });

つまり、基本的にページには li アイテムが表示されます。その上にカーソルを合わせると、div が表示されます。今、私はそれを試して、liから「ホバーを外す」とdivが消えるようにしましたが、UXは友好的ではありませんでした...ちらつきが多かったです。

そこで、閉じるハイパーリンクを追加することにしました...しかし、それをliアイテム内に追加してクリックすると、li内でまだ「ホバリング」しているため、divが再表示されます。ユーザーがdivを閉じることができるようにするには、どうすればこれを処理できますか?

これを行う個別のアイテムがたくさんあるulので、ul の後に閉じるリンクを追加したくありません。明らかにhref、li の外側にタグを追加することはできません。これは明らかに間違っています。