我想在鼠标悬停在按钮上时更改按钮的文本,我找到了一个解决方案,但出于某些原因它不起作用。
我希望发生的是当我悬停在按钮上时,它会变为绿色,并将文本更改为已完成!
。
目前当我悬停在按钮上时,按钮会改变颜色,但文本不会改变。
这是我的CSS:
.button {
border: 0px solid #004B84;
background: red;
padding: 3px 21px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
color: #ffffff;
font-size: 12px;
font-family: Questrial;
text-decoration: none;
vertical-align: middle;
letter-spacing: 2px;
}
.button:hover {
border: 0px solid #1292e1;
background: green;
color: white !important;
content: "Completed!" !important;
}
.button:active {
background: #1292e1;
color: white;
text-decoration: none !important;
}
<button class="button" type="submit" name="completed" value="">New Request</button>
以下是按钮的HTML代码:
<button class="button" type="submit" name="completed" value="">新请求</button>
这个按钮可以用于提交表单或执行其他操作。请确保在使用时将其与相关功能进行连接。