I've experimented with various methods to prevent event bubbling on the mouseenter event, but I'm still encountering an issue. When I hover over a link, the event is triggered for all the links as if they were all being hovered over simultaneously. The situation involves an unordered list of links and I'm utilizing a computed value to dynamically alter the inline styles when hovering over the links:
This is how my component looks like:
<section class="categoryList">
<ul>
<li v-for="category in categories" :key="category.id"&g
<a
@mouseenter.stop="mouseOver()"
@mouseleave.stop="mouseOver()"
class="category"
:style="getStyle"
href="#"
@click.prevent="getCategory(category.name)"
>{{ category.name }}</a
>
</li>
</ul>
</section>
This is the computed value used:
const getStyle = computed(() => {
if (props.primaryColor != undefined && props.primaryColor != "") {
if (!hover.value) {
return `background-color:${props.primaryColor};color:${props.secondaryColor}`;
} else {
return `background-color:${props.secondaryColor};color:${props.primaryColor}`;
}
} else {
if (!hover.value) {
return `background-color:#614EFB;color:white`;
} else {
return `background-color:#523dfa;color:white`;
}
}
});
Additionally, there's a function that controls the hover state dynamically:
function mouseOver() {
hover.value = !hover.value;
}