How to make multiple elements change background color when either element is hovered over by the mouse?

Question

I am looking for a way to have my website's search bar change background color when it is hovered over. Currently, there are two main elements that make it up. There is the text box itself, and the submit button. When the user hovers over the text box element, I have programmed it to change the background color to a lighter shade. What I want tho is to have not only the text box background color to change, but also the submit button background to change as well, so that it looks as if the search bar is all one element. Also, I would like to have it when the user hovers over the submit button to change both background colors as well. So basically no matter what element the user hovers over, both elements will change the background color to the lighter shade I want. Please view my website to see what I am talking about.

Here is the link ( http://www.codesrce.com ).

Here is a Fiddle ( http://jsfiddle.net/d37sN/1/ ).

HTML

<div id="SearchContainer">
    <div id="sb-search" class="sb-search">
        <form>
            <input class="sb-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search">
            <input class="sb-search-submit" type="submit" value=""> <span class="sb-icon-search"></span>

        </form>
    </div>
</div>

Answer 1

I put my own example, u need to use the + css selector to target the other element when you hover on another elements.

#search:hover, #search:hover + .button{

    background-color:red;
}

A sample Fiddle here

Answer 2

You could style both of your search bar elements according to their #sb-search parent:

#sb-search:hover .sb-search-input {
    background: ...;
}
#sb-search:hover .sb-search-submit {
    background: ...;
}