将鼠标悬停在表中的特定元素上时，如何不对表行触发悬停效果

Question

I have hover effect on table row. And inside the table there is a popover menu that appears. The problem is when hovering over popover menu it's table row hover effect gets triggered (as in attached picture). The question is how to not trigger hover effect over table row when hovering over popover?

Image of the effect

I attached also the markup below.

<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

Two simple quick methods i can think of is

add an id to your row as such <tr data-row_id='1'> and then do the same over on your popup element <div data-row_id='1'> and then apply a function on your on hover the popup to simply add a class to tr with the same data row id to hide the tr hover effect.

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

Or write another jquery function to simply find the parent row and again apply a class on hover of the popup. You can use closest() method for that

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

If you post your jquery code or if you are using plain javascript just post it here to help you further