如何实现悬停子元素时动态切换父容器背景图并显示项目操作栏-html教程-PHP中文网

通过监听子元素 hover 事件，动态提取其内部的 src 并设置为父容器背景图，同时触发项目操作栏（如 GitHub 链接按钮）显示，实现美观、响应式的项目展示效果。

通过监听子元素 hover 事件，动态提取其内部 `` 的 `src` 并设置为父容器背景图，同时触发项目操作栏（如 github 链接按钮）显示，实现美观、响应式的项目展示效果。

在构建作品集或项目展示页时，常需实现“悬停缩略图 → 背景全屏切换 + 操作按钮浮现”的交互效果。但原始代码存在两个核心问题：一是直接修改 body 背景导致覆盖全局布局，二是硬编码多个函数（background1()–background5()）难以维护且无法复用。本文提供一套语义清晰、可扩展、符合现代 DOM 操作规范的解决方案。

✅ 正确实现思路

目标应是：当用户悬停 .back-chang 元素时，将其子的图片作为 .back-drop 容器的背景图（而非整个 body），并同步显示浮动工具栏（如 GitHub 链接按钮）。关键在于：

使用 querySelectorAll 批量获取所有可交互项；
利用事件委托思想，统一绑定 mouseover 监听器；
从事件对象中精准提取 target.querySelector('img').src；
动态更新父级容器样式，并控制工具栏显隐。

? 完整代码示例

HTML 结构（精简可复用）：

SolidPoint

Youtube视频总结器，快速将Youtube长视频压缩成文字摘要

下载

<div class="back-drop" id="back-drop">
  <div class="toolbar">
    <a href="https://github.com/yourusername/project1" target="_blank">GitHub</a>
    <a href="#" class="live-demo">Live Demo</a>
  </div>
  <div class="back-frem" id="back-frem">
    <div class="back-chang"><img src="images/finn-balor-wwejpg.jpg" alt="Project 1"></div>
    <div class="back-chang"><img src="images/joe.webp" alt="Project 2"></div>
    <div class="back-chang"><img src="images/notoriousbig.jpg" alt="Project 3"></div>
    <div class="back-chang"><img src="images/finn2.webp" alt="Project 4"></div>
    <div class="back-chang"><img src="images/finn3.jpeg" alt="Project 5"></div>
  </div>
</div>

CSS 样式（聚焦容器级背景与工具栏控制）：

.back-drop {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.4s ease;
}

.toolbar {
  position: absolute;
  top: 20px;
  right: 20px;
  display: none;
  gap: 12px;
  z-index: 10;
}

.toolbar.active {
  display: flex;
}

.toolbar a {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9rem;
}

.back-frem {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 30rem;
  margin: 0 auto;
  max-width: 1200px;
}

.back-chang {
  height: 191px;
  width: 220px;
  background: #110e0e;
  border-radius: 23px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
}

.back-chang:hover {
  transform: scale(1.05);
}

.back-chang img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

JavaScript 逻辑（简洁、健壮、无冗余）：

const backDrop = document.querySelector('#back-drop');
const toolbar = document.querySelector('.toolbar');
const projectCards = document.querySelectorAll('.back-chang');

// 统一处理 hover 事件
projectCards.forEach(card => {
  card.addEventListener('mouseover', (e) => {
    const imgSrc = e.currentTarget.querySelector('img').src;
    backDrop.style.backgroundImage = `url('${imgSrc}')`;
    toolbar.classList.add('active');
  });

  // 可选：鼠标移出时恢复默认背景或隐藏工具栏
  card.addEventListener('mouseout', () => {
    toolbar.classList.remove('active');
  });
});