如何实现鼠标从card-title移至card-content时保持悬浮状态与flex动画？

核心问题原因 #

当前代码仅在鼠标悬停在<p>（card-title所在容器）上时，才会触发content显示和flex放大效果。一旦鼠标离开<p>移到content区域，<p>的hover状态消失，直接导致content隐藏、flex动画复位。

修复方案 #

把每个<p>和对应的<div class="card-content-*">包裹在同一个父容器内，通过监听父容器的hover状态来控制content显示和<p>的flex放大效果。只要鼠标处于父容器范围内（包括<p>和content），状态就会持续保持。

修改后的HTML代码 #

<html>
<head>
</head>
<body>
    <div class="card">
        <!-- 包裹第一个标题与对应内容 -->
        <div class="card-item">
            <p>
                <span class="card-title">GEEKS 1</span>
            </p>
            <div class="card-content-1 hidden">
                <h3>Title GEEKS 1</h3>
                <span>
                    Description here and long long long.<br/>
                    Description here and long long long.<br/>
                </span>
                <nav role="navigation">
                    <ul>
                        <button class="button">Geeks 1 Btn 1</button>
                    </ul>
                    <ul>
                        <button class="button">Geeks 1 Btn 2</button>
                    </ul>
                    <ul> 
                        <button class="button">Geeks 1 Btn 3</button>
                    </ul>
                </nav>
            </div>
        </div>
        
        <!-- 包裹第二个标题与对应内容 -->
        <div class="card-item">
            <p>
                <span class="card-title">GEEKS 2</span>
            </p>
            <div class="card-content-2 hidden">
                <h3>Title GEEKS 2</h3>
                <span>
                    Description here and long long long.<br/>
                    Description here and long long long.<br/>
                    Description here and long long long.
                </span>
                <nav role="navigation">
                    <ul>
                        <button class="button">GEEKS 2 Btn 1</button>
                    </ul>
                    <ul>
                        <button class="button">GEEKS 2 Btn 2</button>
                    </ul>
                    <ul> 
                        <button class="button">GEEKS 2 Btn 3</button>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</body>
</html>

修改后的CSS代码 #

.card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 100%;
  border-radius: 4px;
  background: #7FB77E;
  display: flex;
  gap: 5px;
  padding: .4em;
}

/* 新增card-item容器，作为hover触发主体 */
.card-item {
  position: relative;
  flex: 1;
  transition: all .5s;
}

/* 监听card-item的hover状态，控制内部p的flex放大 */
.card-item:hover p {
  flex: 6;
}

.card p {
  height: 100%; /* 修复原代码中的笔误100%% */
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  border-radius: 2px;
  transition: all .5s;
  background: #7FB77E;
  border: 2px solid #42032C;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card p span {
  min-width: 14em;
  padding: .5em;
  text-align: center;
  transform: rotate(-90deg);
  transition: all .5s;
  text-transform: uppercase;
  color: #42032C;
  letter-spacing: .1em;
}

.card-content-1 {
  position: absolute;
  top: 80px; /* 替换margin为top/left，定位更精准 */
  left: 650px;
}

.card-content-2 {
  position: absolute;
  top: 80px;
  left: 850px;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.3s, opacity 0.3s linear; /* 调整过渡延迟，避免闪烁 */
}

/* 监听card-item的hover状态，控制内部content显示 */
.card-item:hover .hidden {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.button {
  background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border-radius: 12px;
}

关键修改点说明 #

• 新增.card-item容器，将标题与对应内容绑定为一个整体，作为hover触发的主体
• 替换原CSS中针对<p>的hover选择器为.card-item:hover p，确保hover容器时<p>保持放大状态
• 替换原CSS中针对相邻content的hover选择器为.card-item:hover .hidden，确保hover容器时content持续显示
• 修复原代码中.card p的height: 100%%笔误，改为100%
• 调整content的定位方式，从margin改为top/left，避免容器布局影响定位精度
• 优化过渡延迟参数，解决content显示/隐藏时的闪烁问题

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