V-on mouseout fires when hovering on children - vuejs2

Question

<div style='cursor: pointer' v-for="row in rows" class="list-group-item list-group-item-action bg-light sidebar-item pl-2" :active="row.active">
<div v-on:mouseout.stop="controls = null" v-on:mouseover="controls = row.id" class="row">
<div class="col-9">{{ row.title }}</div>
<div v-if="controls == row.id" class="col-1">
<i class="fa fa-edit text-primary"></i>
</div>
<div v-if="controls == row.id" class="col-1">
<i class="text-danger fa fa-trash"></i>
</div>
</div>
</div>
This is my code. #mouseout fires when the mouse hovers over the icons, even though they are still in the div and you haven't mouseout-ed practically.
I have tried with #mouseover and #mouseout on the parent div - same result. I have also tried all event modifiers I could think of.

Answer 1

This is the default behaviours of the eventlisteners mouseover or mouseout. If you want to ignore children you will have to either:
set the css property pointer-events: none on children, or
Check whether the cursor is inside the parent element in your event handler
However, for your use case (reveal an element when parent is hovered) css is more suitable.
E.g.
.col-1 {
display: none;
}
.row:focus > .col-1,
.row:focus-within > col-1,
.row:hover > col-1 {
display: block;
}