I have hover effect on table row. And inside the table there is a popover menu that appears. The problem is when hovering over popover menu it's table row hover effect gets triggered (as in attached picture). The question is how to not trigger hover effect over table row when hovering over popover?
I attached also the markup below.
<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;
}
}
}
Two simple quick methods i can think of is
add an id to your row as such <tr data-row_id='1'>
and then do the same over on your popup element <div data-row_id='1'>
and then apply a function on your on hover the popup to simply add a class to tr with the same data row id to hide the tr hover effect.
Or write another jquery function to simply find the parent row and again apply a class on hover of the popup. You can use closest() method for that
https://api.jquery.com/closest/
If you post your jquery code or if you are using plain javascript just post it here to help you further