WordPress实现Petzl式Hover切换背景图及行内布局求助

1. 实现span/div元素一行显示 #

纯CSS就能搞定，两种常用方案：

• 给父容器设置弹性布局：

.text-wrapper {
  display: flex;
  gap: 15px; /* 可选，控制元素间间距 */
}

• 给目标元素设置行内块级属性：

.target-item {
  display: inline-block;
  margin-right: 15px; /* 可选，控制元素间间距 */
}

注意选择器要对应你WordPress短码生成的实际类名或标签。

2. hover文本切换不同背景图/视频 #

纯CSS方案（静态场景） #

如果每个文本对应的背景素材是固定的，且DOM结构支持CSS选择器关联，不需要JS就能实现。核心逻辑是利用:hover伪类结合兄弟/子选择器触发背景切换：
示例HTML结构：

<div class="hero-box">
  <div class="bg-container">
    <video src="default-video.mp4" autoplay muted loop></video>
    <img class="bg-img bg-1" src="img1.jpg" alt="">
    <img class="bg-img bg-2" src="img2.jpg" alt="">
    <img class="bg-img bg-3" src="img3.jpg" alt="">
  </div>
  <div class="text-links">
    <a href="#" class="link link-1">链接1</a>
    <a href="#" class="link link-2">链接2</a>
    <a href="#" class="link link-3">链接3</a>
  </div>
</div>

对应CSS：

/* 默认状态：显示视频，隐藏所有背景图 */
.bg-container .bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.bg-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* hover不同链接时切换对应背景 */
.text-links .link-1:hover ~ .bg-container .bg-1,
.text-links .link-2:hover ~ .bg-container .bg-2,
.text-links .link-3:hover ~ .bg-container .bg-3 {
  display: block;
}
.text-links .link:hover ~ .bg-container video {
  display: none;
}

局限性：必须保证文本和背景容器的DOM层级支持CSS选择器关联，结构复杂时无法生效。

JS方案（灵活场景） #

如果DOM结构复杂、需要动态加载素材或添加过渡动画，必须用JS辅助，实现逻辑更灵活：
示例JS代码：

// 获取元素
const links = document.querySelectorAll('.link');
const bgContainer = document.querySelector('.bg-container');
const defaultVideo = bgContainer.querySelector('video');
const bgImgs = bgContainer.querySelectorAll('.bg-img');

// 绑定hover事件
links.forEach((link, index) => {
  link.addEventListener('mouseenter', () => {
    // 隐藏默认视频
    defaultVideo.style.display = 'none';
    // 隐藏所有背景图
    bgImgs.forEach(img => img.style.display = 'none');
    // 显示当前链接对应背景图
    bgImgs[index].style.display = 'block';
  });

  link.addEventListener('mouseleave', () => {
    // 恢复默认视频
    defaultVideo.style.display = 'block';
    bgImgs.forEach(img => img.style.display = 'none');
  });
});

这种方案不受DOM结构限制，还能扩展添加淡入淡出等过渡效果。

总结 #

• 元素一行显示：纯CSS完全可实现，用flex或inline-block即可；
• hover切换背景：
  • DOM结构简单、素材固定时，纯CSS可行；
  • 结构复杂或需动态逻辑时，必须用JS辅助，稳定性和灵活性更高。

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