vue 中 子元素hover控制父元素的hover
在代码中,父元素使用:class="{ hover: isHovered }"绑定了一个hover类,当isHovered为true时,父元素会应用hover类的样式。子元素通过@mouseover和@mouseleave事件分别在鼠标悬停和离开时修改isHovered的值,从而控制父元素的:hover状态。
在CSS中,父元素有一个白色背景,当父元素处于:hover状态时,背景色会变为蓝色。子元素设置了鼠标光标为指针形状,以提示用户可以进行交互。
<template>
<div class="parent" :class="{ hover: isHovered }">
<div class="child" @mouseover="handleMouseOver" @mouseleave="handleMouseLeave">
子元素
</div>
</div>
</template>
<script>
export default {
data() {
return {
isHovered: false
};
},
methods: {
handleMouseOver() {
this.isHovered = true;
},
handleMouseLeave() {
this.isHovered = false;
}
}
};
</script>
<style>
.parent {
background-color: white;
transition: background-color 0.3s ease;
}
.parent:hover {
background-color: #f2f4f6;
}
.parent.hover {
background-color: white;
}
.child {
cursor: pointer;
}
.child:hover {
background-color: #f2f4f6;
}
</style>