3

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

理想情况下，我想避免使用 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;
}

提前致谢，

山姆

4

4 回答 4

6

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

选择不是引用元素（我知道）的后代的另一个元素的唯一方法是使用兄弟选择器（一般或相邻）。但是，该解决方案依赖于引用元素（输入）和目标（标题）是 dom 层次结构中的同级元素。

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

作为记录，该示例使用通用的兄弟选择器 (~)，但在这种情况下，相邻的 (+) 也可以正常工作。

这是对兄弟（和子）选择器的更好解释：http: //css-tricks.com/child-and-sibling-selectors/

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

于 2012-07-20T00:26:05.700 回答
1

您已经使用了后代选择器，这意味着“#search-title”必须出现在您的输入元素中才能匹配规则——这显然不会发生。

考虑到文档的结构，当您的输入是任何特定状态时，实际上没有一个 CSS 选择器会匹配 #search-title。

于 2012-07-19T23:48:54.227 回答
0

也许在表单中尝试一个 div 可能会奏效

或者，尝试其中之一

于 2012-07-19T23:18:37.887 回答
0

在我看来，问题就像您正在尝试为未嵌套的项目设置样式，即

input[type="text"]:focus #search-title

search-title说当它是匹配 ' ' 的元素的子元素时，使用 id "" 设置元素的样式，input[type="text"]:focus但从您发布的片段来看，我猜它实际上不是 DOM 意义上的子元素。

您可以查看兄弟样式选择器（例如，“ A + B”匹配项目 B，但仅当它具有前面的兄弟 A 时），特别是“~”可能会有所帮助，但如果元素在 DOM 树中完全不同，那么您可能必须重组你的 DOM 做一些棘手的事情，或者回退到 javascript。

于 2012-07-19T23:55:35.320 回答