我想在关注另一个元素 Hdr_nav_search_input
时更改元素的颜色 Hdr_nav_search_box
。以下是代码: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;
}
最佳答案
您的样式存在一些问题。首先,您用于定位框的选择器不太正确。
.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 {
...
}
这是一个演示以及我为使其正常工作所做的样式更改。
.Hdr_nav_search_input:focus + .Hdr_nav_search_box {
color: #F00;
}
.Hdr_nav_search_box {
line-height: 25px;
color: gray;
}
关于html - 专注于一个元素会改变另一个元素的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15727923/