html - 专注于一个元素会改变另一个元素的 CSS

Question

我想Hdr_nav_search_box在关注另一个元素时更改元素的颜色Hdr_nav_search_input。以下是代码： http: //jsfiddle.net/FJAYk/4/我不明白为什么这不起作用。

<input class="Hdr_nav_search_input" />
<div class="Hdr_nav_search_box" /><span>search for location....</span><i>for example: blah blah</i></div>

-

.Hdr_nav_search_box{
padding: 0 5px;
margin: 7.5px 0;
width:300px;
height: 25px;
background: white;
 }
.Hdr_nav_search_input:focus .Hdr_nav_search_box{
color: #d4d4d4;
 }
.Hdr_nav_search_box span,.Hdr_nav_search_box i{
line-height: 25px;
color: gray;
}
.Hdr_nav_search_input{
padding: 0 5px;
margin: 7.5px 0;
border: 0;
z-index: 2;
position: absolute;
width:300px;
height: 25px;
background: transparent;    
}

Answer 1

你的风格有一些问题。首先，您选择该框的选择器不太正确。

.Hdr_nav_search_input:focus .Hdr_nav_search_box

那就是应用选择所有.Hdr_nav_search_box它们是.Hdr_nav_search_input. 它实际上是一个兄弟，所以你想使用下一个兄弟选择器+：

.Hdr_nav_search_input:focus + .Hdr_nav_search_box

---

其次，如果它正在工作，这个选择器将覆盖你的颜色变化。

.Hdr_nav_search_box span,.Hdr_nav_search_box i{
    ...
}

你可以简单地使用

.Hdr_nav_search_box {
    ...
}

---

这是一个演示以及我为使其正常工作而进行的样式更改。

jsFiddle

.Hdr_nav_search_input:focus + .Hdr_nav_search_box {
    color: #F00;
 }
.Hdr_nav_search_box {
    line-height: 25px;
    color: gray;
}