jQuery：实现.card悬停时内部.card-border宽度动画的简便方案

嘿，这个需求完全不用写JavaScript，用CSS就能轻松搞定，而且是最简洁的方案——利用CSS的:hover伪类结合后代选择器，自动只对**当前被悬停的.card**内部的.card-border生效，根本不需要给每个元素加ID。

实现步骤： #

1. 基础HTML结构（你的9个.card都可以用这个结构重复）：

<div class="card">
  <!-- 这里放Card的其他内容，比如标题、图片等 -->
  <hr class="card-border">
</div>

2. 核心CSS代码：

/* 初始化.card-border的样式和过渡动画 */
.card-border {
  border-top: 5px solid #333; /* 替换成你需要的边框颜色 */
  width: 60%;
  transition: width 0.3s ease; /* 过渡动画：宽度变化在0.3秒内完成，带缓动效果 */
  margin: 0 auto; /* 可选：让HR水平居中，展开时视觉效果更自然 */
}

/* 当.card被悬停时，修改其内部.card-border的宽度 */
.card:hover .card-border {
  width: 100%;
}

为什么这个方案有效？ #

• CSS的.card:hover .card-border是后代选择器，它只会匹配正处于悬停状态的那个.card元素下面的.card-border，其他未被悬停的.card里的HR完全不受影响，完美满足你“仅被悬停的Card内的HR展开”的需求。
• 不需要任何JavaScript逻辑，也不用给每个Card加唯一ID，代码量少且易维护，9个Card可以直接复用这套样式。

可选优化： #

如果你想让动画更丝滑，可以调整transition的参数，比如把时长改成0.5s，或者用自定义缓动函数：

transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);

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