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

Question

我在 table 行上有悬停效果。在 table 中会出现一个弹出菜单。问题是当悬停在弹出菜单上时会触发 table 行悬停效果（如附图所示）。问题是如何在悬停在弹出窗口上时不触发悬停在 table 行上的效果？

我还附上了下面的标记。

<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'> 然后在你悬停弹出窗口时应用一个函数来简单地添加一个 class 以相同数据行 id 的 tr 隐藏 tr 悬停效果。

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

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

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

如果您 post 您的 jquery 代码，或者如果您使用的是纯 javascript，只需 post 这里可以进一步帮助您

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

How to NOT trigger hover effect on table row when hovering over specific element inside it

html

css

hover

popover