web-dev-qa-db-ja.com

要素に焦点を合わせると、他の人の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;    
}
htmlcssfocus
11
Sami

あなたのスタイルにはいくつか問題がありました。まず、ボックスをターゲットにするセレクターが正しくありません。

.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;
}
23
Daniel Imms