Elementor中:hover伪类异常求助：悬停时图片消失且元素超边界

针对你遇到的两个问题（hover时图片消失、元素超出边界），可以通过以下CSS调整解决：

1. 修复元素超出图片边界问题 #

给目标区域的容器添加以下样式，确保容器尺寸匹配图片，且超出内容被裁剪：

/* 替换成你的目标容器选择器，比如 .hover-card */
.hover-card {
  position: relative;
  width: fit-content; /* 让容器宽度适配图片 */
  height: fit-content; /* 让容器高度适配图片 */
  overflow: hidden; /* 裁剪超出容器的内容 */
}

2. 实现悬停时仅显示图片、隐藏文本 #

通过:hover伪类单独控制文本和图片的显示状态，避免误隐藏图片：

/* 默认状态：文本显示，图片可设置为覆盖在文本上方（若需要过渡效果） */
.hover-card .text-element {
  display: block;
  transition: opacity 0.3s ease; /* 可选：添加过渡动画 */
}
.hover-card .image-element {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0; /* 默认隐藏图片 */
  transition: opacity 0.3s ease;
}

/* 悬停状态：隐藏文本，显示图片 */
.hover-card:hover .text-element {
  opacity: 0; /* 或使用 display: none; 无过渡效果 */
  /* 若用display:none，可替换为：visibility: hidden; */
}
.hover-card:hover .image-element {
  opacity: 1; /* 显示图片 */
}

关键注意点 #

• 不要直接给容器的:hover状态设置display: none或opacity: 0，这会导致整个容器（包括图片）被隐藏
• 如果图片是作为容器的背景图，可简化为：

.hover-card {
  width: [图片宽度];
  height: [图片高度];
  background: url('你的图片路径') center/cover no-repeat;
  overflow: hidden;
}
.hover-card:hover .text-element {
  opacity: 0;
}

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