懸停時更改輸入字段背景顏色（鼠標懸停）
[英]Change an input fields background-color on hover (mouseover)
問題描述
我有一個表單，其中的字段必須由用戶填充。 當用戶將鼠標懸停在一個字段上時，我希望它改變顏色。 我試圖讓這個工作在一個單一的領域開始。 我有以下 CSS：
.f2:hover{
border: 10px solid red;
border-top-color: orange;
background-color: red;
opacity:1.0;
}
邊框正在改變顏色，但字段沒有改變顏色。
任何幫助都會很棒。
3 個解決方案
解決方案1
1 2017-11-28 16:07:05
你的 css 應該是這樣的。
.f2 {
background-color: green;
width: 100px;
height: 100px;
}
.f2:hover {
background-color: red;
border: 4px solid red;
}
這是它工作的小提琴。
https://jsfiddle.net/wab9na2z/
下次您發帖時，請添加更多詳細信息，向我們展示更多代碼，並向我們提供有關您的問題的更多信息。 我希望這能解決您的問題並祝您在學習前端開發的道路上好運。
解決方案2
1 2017-11-28 16:11:24
試試這個。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.f2:hover{
border: 10px solid red;
border-top-color: orange;
background-color: red;
opacity:1.0;
}
</style>
</head>
<body>
<form>
<input class="f2" type="text" name="">
<input class="f2" type="text" name="">
</form>
</body>
</html>
解決方案3
-1 2017-11-28 16:11:12
這對我有用
.f2:hover { border: 2px solid black; background-color: red; opacity:1.0;}
<div class="f2">Testing</div>
懸停時更改背景顏色
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.