Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change style of an element when focus is another element

I need to change the style of a div when focus is on another div.I tried the following code but didn't work

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

my css file looks like this

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

Any help is really appreciated!

like image 781
mary r Avatar asked Feb 27 '14 07:02

mary r


1 Answers

If you mean :hover and not :focus, then use adjacent selector, using + which will select your #two on :hover of #one

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

Demo

Note: You've a typo, like if instead of id, also, close your div elements.


As you commented that you want to use focus on div, than replace :hover with :focus but the adjacent selector logic stays the same...

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

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

Demo (Press the first line and see the effect) OR (Click on the result window in jsfiddle, and press the tab button once)

like image 59
Mr. Alien Avatar answered Sep 20 '22 14:09

Mr. Alien