问题描述
当我关注另一个元素Hdr_nav_search_input
时,我想更改元素的颜色Hdr_nav_search_box
.以下是代码: http://jsfiddle.net/FJAYk/4/我不明白为什么这不起作用.
I want to change an element's color Hdr_nav_search_box
when focusing on another element Hdr_nav_search_input
. Here are the codes : http://jsfiddle.net/FJAYk/4/ I don not see why this is not working.
<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;
}
推荐答案
您的样式存在一些问题.首先,您针对框的选择器不太正确.
There were a few problems with your styles. Firstly your selector to target the box isn't quite right.
.Hdr_nav_search_input:focus .Hdr_nav_search_box
这是在选择所有.Hdr_nav_search_box
属于.Hdr_nav_search_input
的子孙的情况下应用的.它实际上是一个兄弟姐妹,因此您想使用下一个兄弟姐妹选择器+
:
That is applying selecting all .Hdr_nav_search_box
where they are a descendant of .Hdr_nav_search_input
. It's actually a sibling so you want to use the next sibling selector +
:
.Hdr_nav_search_input:focus + .Hdr_nav_search_box
第二,如果选择器有效,它将覆盖您的颜色更改.
Secondly this selector would be overriding your colour change if it was working.
.Hdr_nav_search_box span,.Hdr_nav_search_box i{
...
}
您可以简单地使用
.Hdr_nav_search_box {
...
}
这是一个演示,我进行了样式更改以使其正常工作.
Here is a demo and the style changes I made to get it working.
.Hdr_nav_search_input:focus + .Hdr_nav_search_box {
color: #F00;
}
.Hdr_nav_search_box {
line-height: 25px;
color: gray;
}
这篇关于专注于元素会改变他人的CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!