Question

我试图在单击按钮后更改其背景颜色（并可能进行更改，以使您无法再次单击它），但是无法弄清楚如何更改颜色。我只想为此使用HTML和CSS。我该怎么做？

body {
    background-color: white;
}

.button {
  font-family: "Arial", sans-serif;
  background-color: black;
  border: 10px dashed white;
  color: white;
  font-size: 30px;
  text-align: center;
  line-height: 0;
  cursor:pointer;
  border-radius: 8px;
  height:200px;
  width:400px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.button:visited{
  background-image:none;
  background-color: red;
  font-size: 35px;
  border: 10px dashed black;
  color: black;
}

.button:hover{
  background-image:none;
  background-color: white;
  font-size: 35px;
  border: 10px dashed black;
  color: black;
}

<button class="button" type="button" onclick="onClick()">Button</button>

Answer 1

您应将:visited用于链接，而不要button孤独。考虑使用由a插入的button标签，如下所示：

<a href="#" class="button" type="button" onclick="onClick()">Button</a>

如果您希望使其在第一次单击后不可点击，则还可以添加一个引用您的onclick函数的JavaScript代码，如下所示：

function onClick () {
   this.style.pointerEvents = "none";
}

Answer 2

您不能仅使用HTML和CSS。您需要JavaScript。请注意，按钮onclick="onClick()"中是JavaScript function。

使用JavaScript，您可以将按钮类名称更改为button visited，这可以使.button和.visited的CSS选择器起作用。

请注意，a标签上使用的是:visited，而不是按钮。例如，请参见代码段：

var clicks = 0; 
function onClick(event) { 
    event.className = "button visited";
    if (clicks >= 2) { 
     alert("WRONG! YOU LOSE! TRY AGAIN!"); 
     // window.location.href = 'index.html'; 
    } 
     clicks += 1; 
     // document.getElementById("clicks").innerHTML = clicks;
};

body {
background-color: white;
}

.button {
  font-family: "Arial", sans-serif;
  background-color: black;
  border: 10px dashed white;
  color: white;
  font-size: 30px;
  text-align: center;
  line-height: 0;
  cursor:pointer;
  border-radius: 8px;
  height:200px;
  width:400px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.visited{
  background-image:none;
  background-color: red;
  font-size: 35px;
  border: 10px dashed black;
  color: black;
}

.button:hover{
  background-image:none;
  background-color: white;
  font-size: 35px;
  border: 10px dashed black;
  color: black;
}

a:visited {
  color: purple;
}

<!DOCTYPE html>

<html>

<link rel="stylesheet" type="text/css" href="style.css">


<body>
<button id="button1" class="button" type="button" onclick="onClick(this)">Button1</button>
<button id="button2" class="button" type="button" onclick="onClick(this)">Button2</button>
<button id="button3" class="button" type="button" onclick="onClick(this)">Button3</button>
<br/><a href="#">Test &lt;a&gt; visited</a>
</body>
</html>

更新

如果onclick事件中有多个元素，则可以使用：

<button id="button1" class="button" type="button" onclick="onClick(this)">Button1</button>
<button id="button2" class="button" type="button" onclick="onClick(this)">Button2</button>
<button id="button3" class="button" type="button" onclick="onClick(this)">Button3</button>

然后更改为

function onClick(event) { 
     event.className = "button visited";
  // rest of code below

Answer 3

您可以执行所需的操作，但不能使用按钮标签。 :visited选择器用于选择访问的“链接”，因此仅在具有href字段的锚标记上起作用。

从w3schools：

由于以下原因，浏览器限制了可以为a：visited链接设置的样式。   安全问题。

允许的样式为：

颜色
背景颜色
边框颜色（和边框颜色用于   分开的两面）
轮廓色
列规则颜色
颜色   填充和描边部分


所有其他样式均继承自a：link。

body {
    background-color: white;
}

.button {
  font-family: "Arial", sans-serif;
  background-color: black;
  border: 10px dashed white;
  color: white;
  font-size: 30px;
  text-align: center;
  line-height: 0;
  cursor:pointer;
  border-radius: 8px;
  height:200px;
  width:400px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.button:visited{
  background-image:none;
  background-color: red;
  font-size: 35px;
  border: 10px dashed black;
  color: purple;
}

.button:hover{
  background-image:none;
  background-color: white;
  font-size: 35px;
  border: 10px dashed black;
  color: blue;
}

<a class="button" href="google.com" target="_blank">Button</a>

如果您的项目明确希望避免使用href，则必须使用javascript。如果您还希望样式在页面重新加载后保持不变，则必须使用会话从后端进行操作。

如何更改CSS中“已访问”按钮的背景颜色？

3 个答案:

更新