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

Question

我在表格行上有悬停效果。在表格内，会出现一个弹出菜单。问题是当鼠标悬停在弹出菜单上时，它的表格行悬停效果被触发(如附图所示)。 问题是悬停在popover上时如何不触发表格行的悬停效果？

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

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

在你的行中添加一个 id <tr data-row_id='1'>然后在你的弹出元素上做同样的事情 <div data-row_id='1'>然后在悬停弹出窗口时应用一个函数，只需向 tr 添加一个具有相同数据行 ID 的类即可隐藏 tr 悬停效果。

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

或者编写另一个 jquery 函数来简单地找到父行，并在悬停弹出窗口时再次应用一个类。您可以为此使用 closest() 方法

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

如果您发布您的 jquery 代码或者如果您使用的是纯 javascript，只需将其发布在这里以进一步帮助您