如何在video元素悬停时添加文字与悬停遮罩层（Elementor+WordPress）

该需求完全可以实现，无需额外安装插件，通过Elementor自带配置或者少量自定义CSS即可和你已有的hover弹出效果兼容落地。

方案1：使用Elementor自带功能（无代码更易维护） #

• 打开对应页面的Elementor编辑器，选中你的video卡片容器元素
• 切换到「高级」选项卡，找到「鼠标悬停」设置板块，将状态切换为「悬停」
• 配置遮罩层：在「背景」设置项中选择半透明纯色背景（示例值：rgba(0,0,0,0.7)），调整透明度到你需要的效果即可
• 配置悬停文字：在同一「高级」选项卡中找到「伪元素」设置，选择:after伪元素，设置悬停状态下的content为你要展示的说明文字，再调整文字颜色、字号、对齐方式，将z-index设置为高于遮罩层的数值即可保证文字正常显示

方案2：自定义CSS实现（灵活度更高） #

如果自带功能无法满足你的特殊样式需求，可以直接将以下代码添加到对应video元素的「高级」-「自定义CSS」输入框中，注意将代码中的.video-card替换为你实际的视频卡片类名：

/* 视频卡片基础定位，需保证和你现有hover效果不冲突 */
.video-card {
  position: relative;
  overflow: hidden;
}
/* 悬停遮罩层 */
.video-card:hover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
}
/* 悬停说明文字 */
.video-card:hover::after {
  content: '你的自定义说明文字';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 16px;
  z-index: 2;
}

如果要兼容你已经做好的hover弹出效果，只需要保证遮罩层的z-index低于弹出层级、高于视频层级，文字的z-index高于遮罩层层级即可。

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