如何在悬停时将多个按钮的颜色更改为不同的按钮？

Question

我使用HTML和一些JavaScript制作了一个计算器,但我不知道如何更改按钮的颜色,每个按钮在悬停时都会变成另一个颜色.以下是其中一行的代码:

<input style="height:25px; width:40px;" type="button" class='btn btn-default btn-success btn-lg' name="one" value="!" OnClick="Calc.Input.value += '!'">
<input style="height:25px; width:40px;" type="button" class='btn btn-default btn-success btn-lg' name="two" value="@" OnCLick="Calc.Input.value += '@'">
<input style="height:25px; width:40px;" type="button" class='btn btn-default btn-success btn-lg' name="three" value="#" OnClick="Calc.Input.value += '#'">
<input style="height:25px; width:40px;" type="button" class='btn btn-default btn-success btn-lg' name="plus" value="+" OnClick="Calc.Input.value += ' + '">

这是我用来在悬停时更改按钮颜色的CSS代码:

.btn:hover {
background-image: none;
background-color: #ff69b4;
font-weight: bold;
}

它会在悬停时改变按钮的颜色,但我想让每个按钮都有不同的颜色.

Answer 1

您可以使用其name属性定位每个目标:

JS小提琴

.btn[name="one"]:hover {
    background-color: blue;
    font-weight: bold;
}
.btn[name="two"]:hover {
    background-color: yellow;
    font-weight: bold;
}
.btn[name="three"]:hover {
    background-color: black;
    font-weight: bold;
}
.btn[name="plus"]:hover {
    background-color: red;
    font-weight: bold;
}