技术问询：仅悬停特定图标区域时如何改变父元素宽度？

直接给你一套可落地的实现代码，包含基础布局和hover效果，你可以按需调整：

HTML结构 #

<nav class="icon-nav">
  <div class="nav-icon" style="background-image: url('你的图标1路径')"></div>
  <div class="nav-icon" style="background-image: url('你的图标2路径')"></div>
  <div class="nav-icon" style="background-image: url('你的图标3路径')"></div>
  <div class="nav-icon" style="background-image: url('你的图标4路径')"></div>
</nav>

CSS样式 #

/* 导航容器布局 */
.icon-nav {
  display: flex;
  gap: 16px; /* 图标之间的间距 */
  padding: 12px;
  background-color: #f5f5f5;
  border-radius: 24px;
}

/* 图标基础样式 */
.nav-icon {
  width: 40px;
  height: 40px;
  background-size: 70%; /* 初始图标缩放比例，比容器小 */
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px; /* 初始圆角值 */
  transition: all 0.3s ease; /* 平滑过渡动画 */
  cursor: pointer;
}

/* hover触发效果 */
.nav-icon:hover {
  background-size: 80%; /* 图标放大 */
  border-radius: 20px; /* 圆角增大 */
  background-color: #e0e0e0; /* 可选：hover时添加背景色增强反馈 */
}

你原有代码的问题 #

只写了hover时的两个属性，但缺少必要的基础配置：

• 没有给图标元素设置宽高、背景定位/重复规则，导致背景大小调整无效
• 无过渡动画，效果会显得生硬突兀
• 没有设置初始background-size基准，直接用50px的固定值容易超出容器范围

你可以根据需求调整宽高、圆角数值、过渡时长，以及背景图的初始缩放比例。

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