小编K. *_*ers的帖子

在悬停时更改按钮文本

当您将鼠标悬停在按钮上时,我试图更改它的文本,我找到了一个解决方案,但由于某种原因它不起作用。

我想要发生的是当我将鼠标悬停在它上面时它会变成绿色并将文本更改为Completed!.

目前,当我将鼠标悬停在按钮上时,按钮会改变颜色,但文本不会改变。

这是我的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; 
    }
Run Code Online (Sandbox Code Playgroud)
<button class="button" type="submit" name="completed" value="">New Request</button>
Run Code Online (Sandbox Code Playgroud)

这是按钮的html:

<button class="button" type="submit" name="completed" value="">New Request</button>

html css mousehover

4
推荐指数
3
解决办法
2万
查看次数

标签 统计

css ×1

html ×1

mousehover ×1