实现Div Hover时图片覆盖父容器而非Body并添加GitHub按钮

需求与当前问题 #

需求 #

• 鼠标悬停每个.back-chang元素时，对应图片显示为其父容器.back-frem的背景并完全覆盖该容器
• 添加可跳转至GitHub等平台的按钮，用于项目展示

当前问题 #

鼠标悬停时图片覆盖了整个body元素，而非目标父容器.back-frem

原因分析 #

JavaScript函数中错误地将背景样式应用到了body元素上，而非目标父容器.back-frem，导致背景图覆盖整个页面。

修正方案 #

1. 优化JavaScript代码（消除重复+修正目标元素） #

将重复的5个函数合并为一个通用函数，修改目标元素为.back-frem：

function setBackground(imgUrl) {
  const targetContainer = document.getElementById('back-frem');
  targetContainer.style.background = `url('${imgUrl}') center center / cover no-repeat`;
}

2. 更新HTML代码（调用通用函数） #

修改.back-chang的onmouseover事件，传入对应图片路径：

<div class="back-drop" id="back-drop">
  <div class="back-frem" id="back-frem">
    <div class="back-chang" onmouseover="setBackground('images/finn-balor-wwejpg.jpg')">
      <img src="images/finn-balor-wwejpg.jpg" alt="">
    </div>
    <div class="back-chang" onmouseover="setBackground('images/joe.webp')">
      <img src="images/joe.webp" alt="">
    </div>
    <div class="back-chang" onmouseover="setBackground('images/notoriousbig-048838bf207c4e96ad98793aa4904a5a.jpg')">
      <img src="images/notoriousbig-048838bf207c4e96ad98793aa4904a5a.jpg" alt="">
    </div>
    <div class="back-chang" onmouseover="setBackground('images/finn2.webp')">
      <img src="images/finn2.webp" alt="">
    </div>
    <div class="back-chang" onmouseover="setBackground('images/finn3.jpeg')">
      <img src="images/finn3.jpeg" alt="">
    </div>
  </div>
</div>

3. 调整CSS确保容器显示背景 #

给.back-frem添加基础背景样式，修复原布局的不合理设置：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    min-height: 100vh; /* 修正原max-height:10vh的错误，保证页面高度正常 */
    display: flex; /* 补充display属性，让justify/align生效 */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.back-frem {
    width: 100%;
    max-width: 1200px; /* 添加最大宽度，避免容器过宽 */
    height: 30rem;
    border-radius: 23px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden; /* 避免内部元素超出容器 */
}

.back-frem .back-chang {
    margin: 2px;
    height: 191px;
    width: 150px; /* 添加固定宽度，防止布局混乱 */
    background: rgb(17, 14, 14);
    overflow: hidden;
    cursor: pointer;
    border-radius: 23px;
    transition: all 0.3s ease; /* 添加过渡动画，提升交互体验 */
}

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

.back-frem .back-chang:hover {
    height: 222px;
    width: 200px; /* 修正原1222px的过大宽度，避免撑破容器 */
}

添加项目跳转按钮 #

在页面中添加跳转按钮区域，用于链接到GitHub等平台：

HTML代码 #

在.back-drop下方添加按钮容器：

<div class="project-links">
  <a href="#" class="link-btn">GitHub</a>
  <a href="#" class="link-btn">项目演示</a>
  <a href="#" class="link-btn">源代码</a>
</div>

CSS样式 #

添加按钮美化样式：

.project-links {
    display: flex;
    gap: 1rem;
}

.link-btn {
    padding: 0.8rem 1.5rem;
    background-color: #24292f;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.link-btn:hover {
    background-color: #1f2428;
}

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