CSS悬停兄弟元素样式及输入框聚焦标签上移问题求助

咱们一个一个来搞定你的问题，先解决你遇到的浮动标签失效问题，再讲兄弟元素悬停样式的实现~

问题2：输入框获焦时label上移（解决input:focus ~ label无效的问题） #

你用input:focus ~ label没生效，大概率是HTML结构不符合通用兄弟选择器的规则——~选择器只能选中目标元素之后的同级兄弟，如果你的label放在了input前面，或者两者不是同级元素，这个选择器就不起作用。

另外，“内嵌label的输入框”应该是指模拟Material Design那种浮动标签效果吧？给你一套完整的可行方案：

步骤1：正确的HTML结构 #

把input和label放在同一个父容器里，确保label在input之后（不影响语义，因为label的for属性已经关联了input的id）：

<div class="floating-input">
  <input type="text" id="email" placeholder=" ">
  <label for="email">邮箱地址</label>
</div>

⚠️ 注意：input的placeholder要设为一个空格，这样在输入内容时可以用:not(:placeholder-shown)来保持label上移的状态。

步骤2：实现浮动效果的CSS #

.floating-input {
  position: relative;
  margin: 30px 0;
  width: 250px;
}

.floating-input input {
  width: 100%;
  padding: 12px 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: transparent;
  outline: none;
}

.floating-input label {
  position: absolute;
  top: 12px;
  left: 10px;
  color: #999;
  font-size: 16px;
  pointer-events: none; /* 让点击穿透到input，避免点击label时无法聚焦 */
  transition: all 0.2s ease-in-out;
}

/* 这里用~是因为label在input后面，属于同级后续兄弟 */
.floating-input input:focus ~ label,
/* 输入内容后，label保持在上的状态 */
.floating-input input:not(:placeholder-shown) ~ label {
  top: -10px;
  left: 8px;
  font-size: 12px;
  color: #165DFF;
  background-color: #fff; /* 用背景色覆盖input的边框，避免文字重叠 */
  padding: 0 4px;
}

/* 可选：聚焦时改变input边框颜色 */
.floating-input input:focus {
  border-color: #165DFF;
}

这样设置后，input获焦或者有内容时，label就会平滑移动到输入框上方啦。

问题1：鼠标悬停时为兄弟元素应用样式 #

CSS提供了两种兄弟选择器来实现这个需求，根据你的兄弟元素位置选择：

1. 选中紧挨着的下一个兄弟元素（相邻兄弟） #

用+相邻兄弟选择器，只能选中目标元素后面第一个同级兄弟：

<div class="trigger">悬停我</div>
<div class="target">我是相邻兄弟</div>

.trigger:hover + .target {
  background-color: #f5f5f5;
  color: #ff4d4f;
  padding: 8px;
  border-radius: 4px;
}

2. 选中所有后续的同级兄弟元素（不管是否相邻） #

用~通用兄弟选择器，会选中目标元素后面所有符合条件的同级兄弟：

<div class="trigger">悬停我</div>
<div class="other">我是中间元素</div>
<div class="target">兄弟元素1</div>
<div class="target">兄弟元素2</div>

.trigger:hover ~ .target {
  border: 2px solid #52c41a;
  margin: 8px 0;
}

⚠️ 注意：CSS原生没有办法选中目标元素前面的兄弟元素，如果需要这种效果，要么调整HTML结构把兄弟元素放到目标元素后面，要么用JavaScript来监听hover事件动态添加样式。

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