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

【问题标题】：How to NOT trigger hover effect on table row when hovering over specific element inside it将鼠标悬停在其中的特定元素上时如何在表格行上不触发悬停效果
【发布时间】：2016-08-08 06:53:30
【问题描述】：

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

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;
        }
    }
}

【问题讨论】：

你能提供更详细的解释吗？例如你的 css ？
@ganga 没问题，我用相关的 css 更新了帖子
简单的解决方案应该是添加额外的类到带有注释的 td 和带有按钮的 td。然后你可以做简单的逻辑。就像如果 a is hover 做其他事情什么都不做。如果你喜欢这个解决方案，我可以为此发布 js。
这也是个好主意。它与 codenathan 的解决方案一样依赖于 js，因此我将使用 javascript 来修复该行为。并感谢您的帮助！

标签： html css hover popover

【解决方案1】：

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

像<tr data-row_id='1'>那样在你的行中添加一个id，然后在你的弹出元素<div data-row_id='1'>上做同样的事情，然后在你悬停弹出窗口时应用一个函数来简单地将一个类添加到具有相同数据行的tr id隐藏tr悬停效果。

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

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

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

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

【讨论】：

谢谢！我希望避免使用 javascript，但看起来这是实现这一目标的唯一方法。