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

Question

我对表格行有悬停效果。 表格内部会出现一个弹出菜单。 问题是，将鼠标悬停在弹出菜单上时会触发表行悬停效果（如附图所示）。 问题是，将鼠标悬停在弹出框上时如何不触发表行的悬停效果？

效果图

我还附上了下面的标记。

<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

我能想到的两个简单的快速方法是

将id添加到您的行中，例如<tr data-row_id='1'> ，然后在弹出元素<div data-row_id='1'> ，然后将鼠标悬停在弹出<div data-row_id='1'>上只需将具有相同数据行ID的类添加到tr中即可隐藏tr悬停效果。

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

或编写另一个jquery函数以简单地找到父行，然后在弹出窗口的悬停上再次应用一个类。 您可以为此使用mostest（）方法

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

如果您发布自己的jquery代码，或者您使用的是纯JavaScript，请将其发布在此处以帮助您进一步