如何在表行上悬停在特定元素上时不触发悬停效应

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'>执行相同的操作，然后在弹出窗口悬停时应用一个函数，简单地将一个类添加到具有相同数据行id的tr中，以隐藏tr悬停效果。

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

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

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

如果您发布jquery代码或使用普通javascript，只需在这里发布它以进一步帮助您。