title: CSS - Keep hover state on "unhover"?
body: <p>I have a row of 5 divs, and when you hover over one, it fills the width of the screen.<img src="https://i.stack.imgur.com/aiKy1.jpg" alt="6 Multicolored Divs"></p>
  
  <p>The blue div fills the width of the screen by default; that way the screen is always full and I can apply css to shrink it down when I hover over the other divs because it is declared last in the HTML:</p>
  
  <pre><code>#green{
      width:20px;
  }
  #blue{
      width:100%;
  }
  #green:hover{
      width:100%
  }
  #green:hover ~ #blue{
      width:20px;   
  }
  </code></pre>
  
  <p>Is there a way to keep one div open after it is "unhovered"? For example, if the orange div had been open and the mouse went off of it but NOT onto another of the colored divs, it could keep its full width. Currently, when the mouse rolls off, the divs slide back to blue.</p>
  
  <p>Also, can I do this without any script?</p>