html - CSS Focus 无法影响其他元素

<分区>

我环顾四周，找不到在表单获得焦点时显示标题的解决方案。我可能遗漏了一些非常明显的东西(可能无法使用此选择器完成)。

理想情况下，我想避免使用 jQuery 并坚持使用 CSS(更高级的 CSS 也可以)，因为我没有支持 IE 的计划 - 我喜欢学习，但 IE 对我来说太痛苦了。

这是我目前的 CSS:

#search-title {
    color: rgba(0, 0, 0, 0);
    font-size: 20px;
    font-weight: 300;
    margin-left: -30px;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
    -o-transition: all 200ms;
    transition: all 200ms;
}

input[type="text"]:focus #search-title {
    color: #F70;
    margin-left: 35px;
}

提前致谢

山姆

最佳答案

好的，我有一个完全适用于 CSS 的解决方案，但您将不得不稍微调整一下 html 元素。

选择另一个不是引用元素(据我所知)的后代的元素的唯一方法是使用 sibling selector (一般或邻近)。但是，该解决方案依赖于引用元素(输入)和目标(标题)在 dom 层次结构中是 sibling 。

这是一个简单的例子:http://jsfiddle.net/7AaDc/1/

郑重声明，该示例使用通用同级选择器 (~)，但相邻的 (+) 在这种情况下也同样有效。

下面是对兄弟(和 child )选择器的更好解释:http://css-tricks.com/child-and-sibling-selectors/

以下是与兄弟选择器相关的兼容性问题的概要:http://caniuse.com/#search=sibling (tl;dr，这些天得到了广泛的支持)

关于html - CSS Focus 无法影响其他元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11570636/