如何使搜索表單的背景色懸停在輸入提交和輸入文本上

Question

我需要一些代碼幫助。 我在懸停時無法同時更改兩個項目的背景色時遇到問題。 我在輸入文本旁邊輸入了提交提交搜索按鈕，當您將鼠標懸停在其中一個上時，我希望它們都可以更改背景色。

HTML

<div id="search">
    <form  id="search-form">    
        <input type="text" id="search-text" name="query" value='Leia veebilehelt...' this.value='Leia veebilehelt...';}" /> 
        <input type="submit" id="search-submit" value="" /> 
    </form>
</div>

CSS

#search {   /*servs me as a wrapper*/
    margin-right:160px;
    float:right;
    margin-top: 4px;
    cursor: pointer;
}

#search-form{
    font-family: Georgia;
    background: #DDDDDD;
    background: -moz-linear-gradient(top, #C4C4C4 0%, #EAEAEA 0%, #D3D3D3 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C4C4C4), color-stop(0%,#EAEAEA), color-stop(100%,#D3D3D3)); /* webkit */
    width: 300px;
    float: left;
    padding: 0 4px;
    cursor: pointer;
}

#search-form #search-text{
    width: 270px;
    float: left;
    height: 31px;
    border: 0;
    background: #fff;
    background: -moz-linear-gradient(top, #C4C4C4 0%, #EAEAEA 0%, #D3D3D3 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C4C4C4), color-stop(0%,#EAEAEA), color-stop(100%,#D3D3D3)); /* webkit */
    color: #660000;
    font-size: 12px;
    font-family: Georgia;
}
#search-form #search-text:focus{
    outline:none;
    color: black;
    background: #fff;
}



#search-form #search-submit{
    background: url(images/search.png) no-repeat ; /*is a little magnifier picture*/
    border: 0;
    float: right;
    width: 22px;
    height: 27px;
    z-index: 100;
    cursor: pointer;
    margin-top:5px;
}

#search:hover ~ #search-submit, #search-form:hover  ~ #search-text{
background-color:#fff;}  /*this doesnt work*/

這個想法在於使用不帶JavaScript的純CSS / HTML代碼（因為我不了解JS）。

預先感謝您的任何解釋和幫助。

JSFiddle- http://jsfiddle.net/labkitty/TffX3/9/

Answer 1

#search-submit在#search ..內部，因此您不應該在#search使用~ 。其他情況也是如此。

因此，將您的CSS編輯為：

#search:hover #search-submit, #search-form:hover #search-text{
background:#fff;
} 

Answer 2

請嘗試以下代碼

#search input:hover, #search input:hover ~ input{
    background:red;
}

Answer 3

您的輸入標簽具有background-gradient屬性。 您不能僅使用背景顏色覆蓋它，而是將其懸停：-moz-linear-gradient（top，#fff，#fff）; / * Firefox * /