当鼠标悬停任何一个元素时,如何让多个元素改变背景颜色？

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;
}

这里有一个示例小提琴