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 Fiddle

.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;
}

Answer 2

实现这一目标的一种方法是为每个人添加额外的类，如下所示：

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

并为新类添加此css：

.green:hover{
    background-color: green;
}
.blue:hover{
    background-color: blue;
}
.yellow:hover{
    background-color: yellow;
}
.orange:hover{
    background-color: orange;
}

Answer 3

您需要将每个按钮设置为单独的类，它可以从btn：hover继承，然后只需更改所需的详细信息。即。

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

然后是CSS：

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

希望有所帮助。

Answer 4

另一个选择，如果您希望保持CSS统一，则在每个按钮上添加HTML属性：

<button ... hovercc="#1155ff" ...></button>

然后你可以使用CSS中的值：

.btn:hover {
    background-image: none;
    background-color: attr(hovercc, color);
    font-weight: bold;
}

请注意，这不是标准化的，可能不适用于所有浏览器，甚至是现代浏览器，但值得测试。

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

4 个答案: