悬停链接触发对应div显示的CSS代码不生效问题求助

问题根因 #

• CSS相邻兄弟选择器+仅能匹配与当前元素同级、且紧接在当前元素之后的目标元素。你当前的代码存在两层不匹配逻辑：
  1. a标签嵌套在h2.cardtitle内部，和.elementcontainer不属于同一层级，无法直接通过相邻兄弟选择器匹配
  2. 现有HTML结构中.elementcontainer的位置在h2.cardtitle之前，CSS选择器不支持从后往前选中同级前置元素

修复方案 #

方案1：不修改原有HTML结构，使用:has()选择器（推荐，主流浏览器支持率已超90%） #

直接修改CSS即可实现悬停触发+淡入滑入的组合效果：

.elementcontainer {
  opacity: 0;
  transform: translateY(10px); /* 滑入动画初始偏移位置 */
  transition: all 0.3s ease; /* 统一添加过渡属性，同时支持淡入、滑入动画 */
}
/* 匹配包含hover状态a标签的父容器下的目标元素 */
.card-body:has(.cardtitle a:hover) > .elementcontainer {
  opacity: 1;
  transform: translateY(0);
}

方案2：调整HTML结构，兼容不支持:has()的旧版浏览器 #

先调整HTML元素顺序，将.cardtitle移到.elementcontainer之前，保证二者为同级相邻元素：

<div class="maxthumb">
  <div class="card-body">
    <h2 class="cardtitle">
      <a class="text-white" href="http://...">Title</a>
    </h2>
    <!-- elementcontainer移到cardtitle之后 -->
    <div class="elementcontainer">
      <p class="element">text1</p>
      <p class="element">text2</p>
    </div>
    <p class="cardsub">text2</p>
  </div>
</div>

对应修改CSS代码：

.elementcontainer {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}
.cardtitle:hover + .elementcontainer {
  opacity: 1;
  transform: translateY(0);
}

如果调整顺序后视觉显示不符合需求，可以给.card-body添加display: flex; flex-direction: column;属性，再通过order属性调整各元素的视觉排序即可，不会影响选择器匹配逻辑。

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