文章/答案/技术大牛

发布

社区首页 >问答首页 >悬停输入时如何改变跨距的样式

问悬停输入时如何改变跨距的样式
EN

Stack Overflow用户

提问于 2019-10-24 17:17:24

回答 2查看 202关注 0票数 0

我想更改<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

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-10-24 17:20:33

使用相邻兄弟姐妹和子组合子，如：

#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>

注意，不需要子组合器(>)组合器，但是它确保您只选择作为子子的span，而不是所有跨后代都应该有其他的。您也可以使用普通同胞组合器 (~)，而不是相邻的，但在您的情况下，它的特殊性似乎更有帮助。

票数 2

Stack Overflow用户

发布于 2019-10-24 17:28:36

您可以尝试以下代码：

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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58546265

复制

相似问题

问悬停输入时如何改变跨距的样式
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问悬停输入时如何改变跨距的样式EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问悬停输入时如何改变跨距的样式
EN