Wie löst man keinen Hover-Effekt in der Tabellenzeile aus, wenn man über ein bestimmtes Element darin schwebt

Question

Ich habe den Hover-Effekt auf die Tabellenzeile. Und in der Tabelle erscheint ein Popover-Menü. Das Problem ist, wenn der Mauszeiger über das Popover-Menü bewegt wird, wird der Tabellenzeilen-Hover-Effekt ausgelöst (wie im angehängten Bild). Die Frage ist, wie nicht Hover-Effekt über die Tabellenzeile ausgelöst wird, wenn Sie über Popover schweben?

Image of the effect

Ich legte auch die folgenden Markup.

<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

Zwei einfache schnelle Methoden ich denken kann, ist

eine id Ihre Reihe als solche <tr data-row_id='1'> addieren und dann das Gleiche tun auf dem Pop-up über Element <div data-row_id='1'> und wenden Sie dann eine Funktion auf Ihre ein Popup, um einfach eine Klasse zu tr mit der gleichen Datenzeile ID hinzufügen, um den tr Hover-Effekt zu verbergen.

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

Oder eine andere jquery Funktion schreiben, einfach die übergeordnete Zeile zu finden und wieder eine Klasse auf schweben des Popup-Anwendung. Sie können am nächsten() -Methode für das

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

verwenden Wenn Sie Ihre jQuery-Code schreiben oder wenn Sie Ebene verwenden Javascript einfach hier posten, Ihnen zu helfen weiter