要素に焦点を当てて別の要素を変更する

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_inputの子孫であるすべての.Hdr_nav_search_boxを選択適用されていること。

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