在悬停时更改按钮文本

Question

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

我想要发生的是当我将鼠标悬停在它上面时它会变成绿色并将文本更改为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; 
    }

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

这是按钮的html：

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

Answer 1

CSS（无 HTML）：

<span>为此，您无需修改​​ HTML（手动添加标签、手动删除 HTML 元素内容等）。

只需设置按钮的文本内容font-size，然后使用、和 向0px按钮添加您自己的文本和字体大小。:hover::after::after:hover

检查并运行以下代码片段，了解仅使用 CSS 编辑按钮内容的实际示例：

.button {font-size: 0px;min-width: 100px;min-height: 22px;}
.button::after {font-size: 14px;}

.button::after {
content: "New Request";
}
.button:hover::after {
 content: "Completed!";
}

.button:hover {
background-color: green;
border: 0px solid #1292e1;
color: white !important;
}

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

JavaScript：

只需使用textContent()属性将悬停 ( ) 时的文本更改mouseover为悬停 ( ) 时的文本Completed并返回到New Request悬停时 ( mouseout) 的文本。

检查并运行以下代码片段，以获取上述 JavaScript 方法的实际示例：

var btn = document.querySelector(".button");

btn.addEventListener("mouseover", function() {
  this.textContent = "Completed!";
})
btn.addEventListener("mouseout", function() {
  this.textContent = "New Request";
})

.button {
  min-width: 100px;
  min-height: 22px;
}

.button:hover {
background-color: green;
border: 0px solid #1292e1;
color: white !important;
}

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

Answer 2

您可以使用伪元素来做到这一点。

.button {
  width: 150px; /* set a width so it doesnt change upon hover */
   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 span {
  display:none
}

.button:hover:before {
  content:"Completed!";
}

.button:hover {
  background-color: green;
}

<button class="button">
 <span>New request</span>
</button>

Answer 3

如果您想更改页面上元素的值，那么您需要按代码执行此操作 - 尝试使用 JavaScript 执行此操作

编辑：似乎有一种方法：

如何用 CSS 替换文本？