Flex hover元素异常求助：悬浮触发范围不符合预期

解决方案 #

通过以下3处修改即可解决问题：

1. 给卡片添加overflow: hidden，隐藏初始状态下溢出的内容
2. 给隐藏内容容器.content-h默认添加pointer-events: none，阻止其响应鼠标事件
3. 卡片hover时，给.content-h恢复pointer-events: auto，允许正常交互

修改后的完整CSS代码：

.container .card {
    position: relative;
    width: 250px;
    height: 215px;
    background-color: #303030;
    display: flex;
    flex-direction: column;
    margin-left: 40px;
    margin-right: 40px;
    font-family: helvetica, sans-serif;
    border-radius: 7px;
    animation: gradient 5s ease infinite;
    transition: 1.1s ease-in-out;
    overflow: hidden; /* 新增：隐藏溢出内容 */
}

/* 新增：.content-h 默认样式 */
.container .card .content-h {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* 阻止鼠标事件，避免触发父元素hover */
    transition: 1.2s ease-in-out;
    font-family: helvetica, sans-serif;
}

.container .card:hover .content-h {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* 新增：恢复鼠标事件 */
    transition: 1.2s ease-in-out;
    font-family: helvetica, sans-serif;
}

.container .card:hover {
    position: relative;
    height: 525px;
    font-family: helvetica, sans-serif;
    margin-bottom: -310px;
    padding: 15px;
    padding-top: 60px;
}

问题原因 #

默认状态下，.content-h作为卡片的子元素，即便设置了opacity: 0和visibility: hidden，仍然会接收鼠标事件，这些事件会冒泡到父元素.card，导致鼠标悬浮到隐藏区域时也触发hover效果。

pointer-events: none可以让隐藏的内容容器彻底不响应任何鼠标事件，切断其与hover触发的关联；hover时恢复该属性则保证内容可见后可以正常交互。overflow: hidden则是为了避免初始状态下溢出的内容显示在卡片外部，维持布局整洁。

内容的提问来源于stack exchange，提问作者InfiniteWolf