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

示例小提琴here

Answer 2

您可以根据#sb-search父级的搜索栏元素设置样式：

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

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

2 个答案: