CSS新手求助：如何实现悬停时修改文本输入框的宽度

问题根因 #

你使用的相邻兄弟选择器+仅能匹配紧跟在当前元素之后的同级元素，你的HTML结构中.search-text输入框位于.search-button链接的前方，因此a:hover + .search-text无法匹配到输入框元素，样式不生效。

可行实现方案 #

方案1（全浏览器兼容，无需调整HTML结构） #

绑定父元素的hover状态，悬停在整个搜索区域时触发样式修改，是最常用的实现方式：

/* 输入框基础样式，可根据你的原有需求调整默认宽度 */
.search-text {
  width: 80px;
  /* 可选：添加过渡效果让宽度变化更顺滑 */
  transition: width 0.2s linear;
}
/* 父元素悬停时修改输入框宽度 */
.search-box:hover .search-text {
  width: 120px;
}

方案2（仅悬停在搜索按钮时触发宽度修改） #

如果你需要只有鼠标放在搜索按钮上时才修改输入框宽度，可选择以下两种方式实现：

1. 兼容新版主流浏览器的写法，使用CSS :has()选择器：

.search-box:has(.search-button:hover) .search-text {
  width: 120px;
}

2. 兼容旧版浏览器的写法，调整HTML元素顺序后用flex控制显示位置：
   先修改HTML结构，把输入框放到链接后面：

<div class = "search-box">
  <a class="search-button" href="#">search</a>
  <input class="search-text" type="text" placeholder="type something">
</div>

再补充CSS控制显示顺序和hover样式：

.search-box {
  display: flex;
}
.search-text {
  order: 1;
  width: 80px;
}
.search-button {
  order: 2;
}
a:hover + .search-text {
  width: 120px;
}

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