当焦点是另一个元素时,更改元素的样式

Question

当焦点在另一个div上时,我需要改变div的样式.我尝试了下面的代码但是没有用

<div id="one">
<div id="two">

我的css文件看起来像这样

#one {
    background-color:red;
}
#two:focus #one {
    background-color:green;
}

任何帮助真的很感激!

Answer 1

如果你的意思:hover,而不是:focus,然后用相邻的选择,使用+这将选择#two上:hover的#one

#one:hover + #two {
   color: red;
}

演示

注意:你有一个拼写错误,if而不是id关闭你的div 元素.

正如您所评论的那样,您想要使用焦点div,而不是替换:hover,:focus但相邻的选择器逻辑保持不变...

<div id="one" tabindex="1">One, Hover Me</div>
<div id="two">Two</div>

#one:focus + #two {
   color: red;
}

演示 (按第一行并查看效果)或(在jsfiddle中单击结果窗口,然后按一下标签按钮)