悬停输入时如何更改跨度样式答案

【问题标题】：How to Change Style of Span When Hovering Input [duplicate]悬停输入时如何更改跨度样式
【发布时间】：2019-10-25 01:28:46
【问题描述】：

我想更改<span /> 的样式，它不是输入的子元素。我试图用+ 和> 找到<span />，但我永远无法改变它。

是否可以用纯css/scss改变它的样式？

#input:hover,
#input:focus-within {
  span { color: red; }
}

<input type="search" id="input" value='' />
<div>
  <span>My colour should change when hovering the input.</span>
</div>

【问题讨论】：

标签： css

【解决方案1】：

使用adjacent sibling 和child combinators 之类的：

#input:hover+div>span,
#input:focus-within+div>span {
  color: red;
}

<input type="search" id="input" value='' />
<div>
  <span>My colour should change when hovering the input.</span>
</div>

请注意，子 (>) 组合子不是必需的，但它确保您只选择子跨度，而不是所有跨度后代都应该有其他子代。您也可以使用general sibling combinator (~) 而不是相邻的，但同样，特异性似乎对您的情况更有帮助。

【讨论】：

【解决方案2】：

你可以试试这个代码：

input[type="search"]#input:hover ~ div span {
   color: red; 
}

<input type="search" id="input" value='' />
<div>
  <span>My colour should change when hovering the input.</span>
</div>

【讨论】：