CSS hover效果无法作用于其他div元素，实现hover显隐文本求助

问题根源 #

你写的hover触发规则存在三个核心问题：

• 选择器逻辑错误：原规则.call-to-action a:hover > .click用了子选择器>，代表选中a标签内部的子元素.click，但实际HTML结构中.click、.apply和a标签是同级元素，且排在a标签之前，CSS没有支持向前匹配的兄弟选择器，所以规则无法命中目标元素。
• 缺少.apply对应的hover显示规则，就算选择器正确，.apply元素也不会显示。
• 你给.click设置了绝对定位，但没有给父容器.call-to-action加position: relative，会导致文本定位以整个页面视口为基准，出现偏移。

解决方法 #

提供两种实现方案，按需选择即可：

方案1：绑定hover到父容器（无需修改HTML结构） #

hover父容器.call-to-action的任意区域都显示文本，如果要限制只有hover按钮才显示，选方案2。

1. 先给父容器加定位属性：

.call-to-action {
  position: relative;
}

2. 替换原有的hover规则，补充.apply的显示配置：

.call-to-action:hover .click,
.call-to-action:hover .apply {
  opacity: 1;
  color: white;
  position: absolute;
  font-size: 30px; /* 原代码300px明显为笔误，可按需调整大小 */
  transition: 0.4s;
}
/* 单独调整两个文本的位置，避免重叠，数值可自行修改 */
.call-to-action:hover .click {
  transform: translate(-110%, 25%);
}
.call-to-action:hover .apply {
  transform: translate(110%, 25%);
}

方案2：仅hover按钮时显示文本（需调整HTML顺序） #

1. 调整HTML结构，把a标签移到两个div前面，让CSS可以用后续兄弟选择器~匹配到两个文本元素：

<section class="call-to-action">         
  <h1>Enroll for various online courses<br>Anywhere from the world</h1>
  <a href="#">Call to Action</a>  
  <div class="click">Click</div> <div class="apply"> to Apply </div> 
</section>

2. 替换hover规则即可：

.call-to-action a:hover ~ .click,
.call-to-action a:hover ~ .apply {
  opacity: 1;
  color: white;
  position: absolute;
  font-size: 30px;
  transition: 0.4s;
}
/* 位置调整规则和方案1一致 */
.call-to-action:hover .click {
  transform: translate(-110%, 25%);
}
.call-to-action:hover .apply {
  transform: translate(110%, 25%);
}

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