Question

当我将文本字段悬停时，我希望提交字段的字体颜色变为红色。

我尝试了运算符>，+和~，但它们都不起作用。

这是我到目前为止所做的：http://jsfiddle.net/p0zxctet/

Answer 1

我刚从堆叠溢出回来，看到它还没有被充分回答。这是我的解决方案利用jQuery来获得你想要的效果：

HTML

<input type="text" id="textField" placeholder="Hover Here"/>
<input type="submit" id="submitBtn" />

jQuery

$("#textField").hover(function(){
    $("#submitBtn").css({"color":"red"});
});
$("#textField").mouseout(function() {
    $("#submitBtn").css({"color":"black"});
});

以下是显示此操作的小提琴：https://jsfiddle.net/z9czoedp/

Answer 2

尝试使用：悬停选择器

.form-control.search-field:hover{
    color: red;
}

5-28添加

您的意思是当您将鼠标悬停在输入上时，提交按钮会将其颜色更改为红色吗？

我认为css不能这样做。您需要使用javascript，例如：

document.querySelector("#db-search").onmouseover = function(){
    document.querySelector("input[type=submit]").style.color = "red"
}
document.querySelector("#db-search").onmouseout = function(){
    document.querySelector("input[type=submit]").style.removeProperty("color")
}

Answer 3

您还需要考虑浏览器前缀。

input {
    color: #cfcfcf;
}

input::-webkit-input-placeholder {
  color: #cfcfcf;
}

input:-moz-placeholder { /* Firefox 18- */
    color: #cfcfcf;
}

input::-moz-placeholder {  /* Firefox 19+ */
   color: #cfcfcf;
}

input:-ms-input-placeholder {  
    color: #cfcfcf;
}

/*
* On hover
*/
input:hover::-webkit-input-placeholder,
input:focus::-webkit-input-placeholder {
     color: #F00;
}

input:hover:-moz-placeholder,
input:focus:-moz-placeholder{ /* Firefox 18- */
     color: #F00;
}

input:hover::-moz-placeholder,
input:focus::-moz-placeholder{  /* Firefox 19+ */
   color: #F00;
}

input:hover:-ms-input-placeholder,
input:focus:-ms-input-placeholder{  
   color: #F00;
}

悬停元素并更改另一个元素

3 个答案:

5-28添加