テーブル内の特定の要素をホバリングするときにテーブル行にホバー効果をトリガーしない方法

Question

テーブル行にホバー効果があります。テーブルの中にポップオーバーメニューが表示されます。問題は、テーブル行のホバー効果が（添付された画像のように）トリガーされるポップオーバーメニューの上にカーソルを置いたときです。 質問は、ポップオーバーでマウスを動かしたときに、テーブル行に対してホバー効果を引き起こさないようにする方法です。

Image of the effect

私はまた、以下のマークアップを添付。

<table class="table__table"> 
<tbody> 
    <tr class="table__body__tr"> 
     <td class="table__body__td">Comment</td> 
     <td class="table__body__td"> 
      <button type="button" class="three-dots"></button> 
      <div class="popover__menu is-opened"> 
       <a href="#" class="popover__link">Reply to comment</a> 
       <a href="#" class="popover__link">Delete comment</a> 
      </div> 
     </td> 
    </tr> 
</tbody> 

CSS

.table { 
    &__body { 
     &__tr { 
      transition: background-color .1s; 

      &:hover { 
       background-color: $grey--light; 
      } 
     } 
    } 
} 

.popover { 
    &__menu { 
     position: absolute; 
     left: 0; 
     visibility: hidden; 
     opacity: 0; 
     z-index: -1; 

     width: auto; 

     background-color: white; 

     &.is-opened { 
      z-index: 1; 
      visibility: visible; 
      opacity: 1; 
     } 
    } 
} 

Answer 1

私は考えることができる2つの単純な迅速な方法が

など<tr data-row_id='1'>としてあなたの行にIDを追加してから、ポップアップで同じオーバーを行うことです要素<div data-row_id='1'>を作成し、ポップアップ上に関数を適用して、同じデータ行IDを持つtrをtrに追加するだけで、tr hoverエフェクトを隠すことができます。

https://api.jquery.com/data/

それとも単に親行を見つけ、再びポップアップのホバー上のクラスを適用するには、別のjqueryの関数を記述します。あなたは、あなたのjqueryのコードを投稿した場合、その

https://api.jquery.com/closest/

のために最も近い（）メソッドを使用するか、プレーンを使用している場合だけ