title: How to make a search form background-color hover over input submit and input text at the same time
body: <p>I need some help with code. I'm having problems with hover not changing the background-color on two items at the same time. I have input submit  search button next to the input text and i want both of them to change background color when your hover over one of them. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="search"&gt;
      &lt;form  id="search-form"&gt;    
          &lt;input type="text" id="search-text" name="query" value='Leia veebilehelt...' this.value='Leia veebilehelt...';}" /&gt; 
          &lt;input type="submit" id="search-submit" value="" /&gt; 
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#search {   /*servs me as a wrapper*/
      margin-right:160px;
      float:right;
      margin-top: 4px;
      cursor: pointer;
  }
  
  #search-form{
      font-family: Georgia;
      background: #DDDDDD;
      background: -moz-linear-gradient(top, #C4C4C4 0%, #EAEAEA 0%, #D3D3D3 100%); /* firefox */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C4C4C4), color-stop(0%,#EAEAEA), color-stop(100%,#D3D3D3)); /* webkit */
      width: 300px;
      float: left;
      padding: 0 4px;
      cursor: pointer;
  }
  
  #search-form #search-text{
      width: 270px;
      float: left;
      height: 31px;
      border: 0;
      background: #fff;
      background: -moz-linear-gradient(top, #C4C4C4 0%, #EAEAEA 0%, #D3D3D3 100%); /* firefox */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C4C4C4), color-stop(0%,#EAEAEA), color-stop(100%,#D3D3D3)); /* webkit */
      color: #660000;
      font-size: 12px;
      font-family: Georgia;
  }
  #search-form #search-text:focus{
      outline:none;
      color: black;
      background: #fff;
  }
  
  
  
  #search-form #search-submit{
      background: url(images/search.png) no-repeat ; /*is a little magnifier picture*/
      border: 0;
      float: right;
      width: 22px;
      height: 27px;
      z-index: 100;
      cursor: pointer;
      margin-top:5px;
  }
  
  #search:hover ~ #search-submit, #search-form:hover  ~ #search-text{
  background-color:#fff;}  /*this doesnt work*/
  </code></pre>
  
  <p>The idea lied in using pure CSS/HTML code without JavaScript (because I don't understand JS).</p>
  
  <p>Thank you in advance for any explanation and help.</p>
  
  <p>JSFiddle - <a href="http://jsfiddle.net/labkitty/TffX3/9/" rel="nofollow">http://jsfiddle.net/labkitty/TffX3/9/</a></p>