[英]How to make multiple elements change background color when either element is hovered over by the mouse?
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 ). 这是链接( http://www.codesrce.com )。
Here is a Fiddle ( http://jsfiddle.net/d37sN/1/ ). 这是一个小提琴( http://jsfiddle.net/d37sN/1/ )。
HTML 的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>
You could style both of your search bar elements according to their #sb-search
parent: 您可以根据两个搜索栏元素的
#sb-search
父元素设置样式:
#sb-search:hover .sb-search-input {
background: ...;
}
#sb-search:hover .sb-search-submit {
background: ...;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.