фокусировка на элементе изменяет CSS другого

Я хочу изменить цвет элемента 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;    
}
8
css focus html

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;
}
18