將鼠標懸停在表中的特定元素上時，如何不對表行觸發懸停效果

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'> ，然后將鼠標懸停在彈出<div data-row_id='1'>上只需將具有相同數據行ID的類添加到tr中即可隱藏tr懸停效果。

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

或編寫另一個jquery函數以簡單地找到父行，然后在彈出窗口的懸停上再次應用一個類。 您可以為此使用mostest（）方法

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

如果您發布自己的jquery代碼，或者您使用的是純JavaScript，請將其發布在此處以幫助您進一步