WordPress Elementor自定义CSS：图片悬停时显示指定ID按钮的问题求助

你遇到的核心问题确实是CSS选择器的逻辑错误——你写的#img-b:hover #button-b是后代选择器，只有当#button-b是#img-b的直接/间接子元素时才会生效，但在Elementor里你是分别创建的图片和按钮，它们大概率是同级关系或者共享同一个父容器，根本不是父子结构，所以这个选择器完全不会触发。

下面给你两种最常用的解决方案，根据你的Elementor结构来选：

方案1：利用兄弟选择器（适用于图片和按钮是同级元素） #

如果你的#img-b和#button-b在同一个Section/Column里，是平级的DOM元素：

/* 默认隐藏按钮 */
#button-b {
  display: none;
  position: absolute;
  z-index: 2; /* 调整为比弹窗文本低，确保在下方 */
  /* 保留你之前设置的其他定位样式 */
}

/* 当图片悬停时，显示相邻的按钮（紧挨着图片的同级元素） */
#img-b:hover + #button-b {
  display: block;
}

/* 如果按钮不是紧挨着图片，用通用兄弟选择器 */
/* #img-b:hover ~ #button-b {
  display: block;
} */

/* 保留你原来的图片悬停样式 */
#img-b:hover {
  transform: scale(1.3);
  filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
}

/* 调整弹窗文本的z-index，让它在按钮上方 */
#img-b:hover:after {
  z-index: 3; /* 比按钮的z-index高 */
  background-color: #FFFFFF;
  content: "example text";
  word-wrap: break-word;
  font-size: 14px;
  text-align: left;
  padding: 15px 50px 15px 15px;
  border-radius: 10px;
  position: absolute;
  top: 26px;
  bottom: 20px;
  right: 110px;
  left: -148px;
}

方案2：利用父容器的hover状态（更稳妥，推荐） #

如果不确定图片和按钮的同级关系，或者后续可能调整布局，建议给它们的共同父容器（比如Elementor里的Column或Section）设置一个自定义ID（比如#img-button-container），然后通过父容器的hover来触发按钮显示：

/* 默认隐藏按钮 */
#button-b {
  display: none;
  position: absolute;
  z-index: 2;
  /* 保留你的定位样式 */
}

/* 父容器悬停时显示按钮 */
#img-button-container:hover #button-b {
  display: block;
}

/* 父容器悬停时同时触发图片的缩放阴影效果 */
#img-button-container:hover #img-b {
  transform: scale(1.3);
  filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
}

/* 父容器悬停时显示弹窗文本 */
#img-button-container:hover #img-b:after {
  z-index: 3;
  background-color: #FFFFFF;
  content: "example text";
  word-wrap: break-word;
  font-size: 14px;
  text-align: left;
  padding: 15px 50px 15px 15px;
  border-radius: 10px;
  position: absolute;
  top: 26px;
  bottom: 20px;
  right: 110px;
  left: -148px;
}

关键注意事项 #

• 父容器必须设置相对定位：给你的父容器（Column/Section）添加自定义CSS：position: relative;，否则按钮的绝对定位会相对于整个页面，位置会错乱。
• 检查z-index层级：确保弹窗文本的z-index比按钮高，这样按钮才会在弹窗下方（我已经在代码里调整了）。
• Elementor样式优先级：如果Elementor自带的样式覆盖了你的自定义CSS，可以尝试给display属性加!important（不推荐长期用，但可以用来测试问题）：display: block !important;。

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