【问题标题】：How can I make a button that changes the text inside when clicked?如何制作一个按钮，在单击时更改里面的文本？
【发布时间】：2023-02-06 09:49:49
【问题描述】：

我想制作一个按钮，通过按下按钮来更改按钮内的文本，但我不知道怎么做！ :(

我使用了 :hover，但是当我将鼠标指针移开时，它又回到了之前的状态。

【问题讨论】：

您可以将 :visited 伪类用于锚标记 <a> 并将锚标记样式设置为按钮以更改文本。但这只会以一种方式改变它，即您将无法在再次单击它时返回到之前的文本。我建议使用javascript 而不仅仅是html 和css。

标签： html css

【解决方案1】：

我只知道如何使用 javascript 执行此操作，希望对您有所帮助。

HTML

 <button class="btn">Hey, click me!</button>

JS

首先我将按钮存储在一个变量中

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

然后我使用“click”事件向按钮添加一个事件侦听器，这将使函数“function()”在单击按钮时执行

button.addEventListener("click", function(){})

现在，我定义了更改按钮文本的函数，使用“this”访问函数的按钮，使用“.textContent”更改其中的文本

button.addEventListener("click", function(){
    this.textContent = "Hey, you clicked me!"
})

单击“运行”进行预览

var button = document.querySelector(".btn")
button.addEventListener("click", function(){
  this.textContent = "Hey, you clicked me!"
})

&lt;button class="btn"&gt;Hey, click me!&lt;/button&gt;

【讨论】：

【解决方案2】：

有可能通过伪类 :hover 和数据属性的使用来解决它。这个解决方案的想法是隐藏原始按钮文本，添加一个空内容，然后将鼠标悬停在元素上以显示数据属性的内容。

我将在以下示例中向您展示如何操作：

body {
  background-color: #F2CD5C;
  text-align: center;
 
}
.container {
  margin-top: 30vh;
}
/* 
MARK BUTTON:
In the button styles, it is necessary to hide the original text that we generated, to create the correct spacing and the data attribute text can overlap

The text color must be the same as the button background. 
Position must be relative.

*/
.button {
  position: relative;
  padding: 0.5em 1em;
  border: 2px solid #fff;
  border-radius: 15px;
  font-size: 2em;
  color: black;
  background: black;
}

/*
MARK USE :before and :after
Setup pseudo-element ::before with content: ""; and position must be absolute and setup with the original position text inside the button.

Write ::after with the exact text inside button = Click me! with the same position and setup to ::before pseudo-element

*/
.button::before {
  content: "";
  position: absolute;
  left:0;
  width: 100%;
  text-align: center;
  opacity: 0;
  color: white;
}
.button::after {
  content: "Click me!";
  position: absolute;
  left:0;
  width: 100%;
  text-align: center;
  opacity: 1;
  color: white;
}

.button::before {
  content: attr(data-hover);
}

.button:hover:before{
  opacity: 1;
}

.button:hover:after{
  opacity: 0;
}

<div class="container">
  <button class="button" type="button" data-hover="Hello world!">Click me!</button>
</div>

代码使用伪元素 ::before 和 ::after 在按钮悬停时显示不同的文本。文字“点击我！”被设置为 ::after 伪元素的内容，而 ::before 伪元素从“data-hover”属性获取其内容。当按钮悬停时，::before 伪元素的不透明度变为 1，::after 伪元素的不透明度变为 0，有效地隐藏和显示按钮上的不同文本。

我希望这可以帮助你解决你的问题。无论如何，这个解决方案并不干净，我们应该使用 JavaScript 处理 DOM。

参考链接 Using data attributes

【讨论】：