當鼠標懸停任一元素時，如何使多個元素改變背景顏色？

Question

我正在尋找一種方法，讓我的網站的搜索欄懸停在其搜索欄上即可更改背景顏色。 當前，有兩個主要元素組成。 有文本框本身和提交按鈕。 當用戶將鼠標懸停在文本框元素上時，我對其進行了編程，以將背景色更改為較淺的陰影。 我想要的不僅是要更改文本框的背景色，還要更改提交按鈕的背景，以使搜索欄看起來像是一個元素。 另外，當用戶將鼠標懸停在“提交”按鈕上以同時更改兩種背景色時，我也希望擁有它。 因此，基本上，無論用戶將鼠標懸停在哪個元素上，這兩個元素都會將背景顏色更改為我想要的較淺陰影。 請查看我的網站以查看我在說什么。

這是鏈接（ http://www.codesrce.com ）。

這是一個小提琴（ 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

我以我自己的示例為例，當您將鼠標懸停在另一個元素上時，需要使用+ css選擇器將另一個元素作為目標。

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

    background-color:red;
}

這里的小提琴樣本

Answer 2

您可以根據兩個搜索欄元素的#sb-search父元素設置樣式：

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