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内..所以你不应该在那里使用~ ..与其他人一样也是如此..

所以，编辑你的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

您的输入标记具有背景渐变属性。你不能只使用背景颜色覆盖它在悬停时试试这个：-moz-linear-gradient（top，＃ff，＃ff）; / * firefox * /

如何使搜索表单背景颜色悬停在输入提交和输入文本的同时

3 个答案:

请尝试以下代码