Is there a way to "link" several elements?
<p>Suppose I have 4 visible divs: <br />
&nbsp; - 2 on top <br />
&nbsp; - 2 on the bottom, wrapped in a container <br />
and 1 hidden div.</p>

<p>When a mouse hover over a bottom div it changes its color and changes color of one of the top divs.</p>

<p>When user clicks on a bottom div the hidden div appears and stays on the screen until mouse leave the container.</p>

<p>I use if statements to change color of divs, but I'm not sure whether I'm doing this right. Maybe there is a more simple and elegant way to do this.</p>

<p>So there are the questions: <br />
&nbsp; - Do I have to use if statement here? Maybe there is a way to somehow "link" pairs of elements to reduce the amount of code?<br />
&nbsp; - What if I want a top div to stay active while hidden div is visible? Do I need to write additional function with if statements again? Wouldn't that be "do not repeat yourself" rule violation?</p>

<p>Code example here: <a href="http://jsfiddle.net/Xq9kr" rel="nofollow">http://jsfiddle.net/Xq9kr</a></p>
