Question

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

我还附上了下面的标记。

<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

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

在您的行<tr data-row_id='1'>中添加一个ID，然后在弹出元素<div data-row_id='1'>上执行相同的操作，然后在您的on上应用一个函数，将弹出窗口添加到tr中相同的数据行id隐藏tr悬停效果。

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

或者编写另一个jquery函数来简单地找到父行，然后再次在弹出窗口中应用一个类。你可以使用nearest（）方法

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

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

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

1 个答案: