子元素hover控制父元素的hover

最新推荐文章于 2024-02-28 11:08:51 发布

suo172

最新推荐文章于 2024-02-28 11:08:51 发布

阅读量1.7k

点赞数

文章标签： css3 前端

本文链接：https://blog.csdn.net/suo172/article/details/133681302

版权

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>