I'd like to create a hover button that only affects the nested elements inside it. Right now, when I hover over one button, all the nested elements inside its sibling buttons get styled.
Any ideas on how to fix this?
<div id="app">
<button
v-on:mouseover="isHovering = true"
v-on:mouseout="isHovering = false">Button 1
</button>
<p v-bind:class="{hovering: isHovering}">
{{ isHovering ? "Yes" : "No" }}
</p>
<button
v-on:mouseover="isHovering = true"
v-on:mouseout="isHovering = false">Button 2
</button>
<p v-bind:class="{hovering: isHovering}">
{{ isHovering ? "Yes" : "No" }}
</p>
</div>
const app = new Vue({
el: "#app",
data: {
isHovering: false
}
})
.hovering {
display: red;
}