title: Apply the hover state to multiple divs when another div is hovered over
body: <p>I'm looking for a way to apply the hover state to a selection of divs on my page when another div is hovered over with the mouse.</p>
  
  <p>Hopefully this code will help explain what I need a bit better...</p>
  
  <pre><code>CSS
  ​#hovered_div {
  position:absolute;
  width:50px;
  height:50px;
  margin-top:25px;
  margin-left:25px;
  background-color:blue;   
  }
  #hovered_div:hover {
  background-color:red;   
  }
  
  #div1 {
  position:absolute;
  width:50px;
  height:50px;
  margin-top:100px;
  margin-left:100px;
  background-color:yellow;   
  }
  #div1:hover {
  background-color:green;
  width:75px;    
  }
  
  #div2 {
  position:absolute;
  width:50px;
  height:50px;
  margin-top:100px;
  margin-left:25px;
  background-color:pink;   
  }
  #div2:hover {
  background-color:black;
  height:250px;    
  }
  
  #div3 {
  position:absolute;
  width:50px;
  height:50px;
  margin-top:25px;
  margin-left:100px;
  background-color:purple;   
  }
  #div3:hover {
  background-color:grey;
  width:150px;    
  }
  
  HTML
  
  ​&lt;div id="hovered_div"&gt;&lt;/div&gt;
  ​&lt;div id="div1"&gt;&lt;/div&gt;
  ​&lt;div id="div2"&gt;&lt;/div&gt;
  ​&lt;div id="div3"&gt;&lt;/div&gt;​​​​​​​​​​​​​​​​​​​​​​   
  </code></pre>
  
  <p><a href="http://jsfiddle.net/cX7UC/" rel="nofollow">jsFiddle</a></p>
  
  <p>So, what I'm hoping to achieve is, when the "hovered_div" is hovered over with the mouse, the hovered state for that div, and the other three divs gets applied, and when the mouse moves off, they all go back to normal.
  ​</p>
  
  <p>Can anyone help me?</p>