如何更改CSS中“访问”按钮的背景色？
如何更改CSS中“访问”按钮的背景色？
提问于 2019-02-06 01:45:26
我试图改变按钮的背景色后，它已经被点击(并有可能使它，使您不能再次点击它)，但不知道如何改变颜色。为此，我只想使用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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-02-06 01:59:46
您不能只使用HTML和CSS；您需要JavaScript。注意，按钮中的onclick="onClick()"是一个JavaScript函数。
使用JavaScript，您可以将按钮类名更改为button visited，从而使.button和.visited的CSS选择器工作。
注意，:visited在a标记上使用，而不是在按钮上使用。例如，请参见片段：
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 <a> 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 belowStack Overflow用户
发布于 2019-02-06 02:35:44
你可以做你想做的事，但不能用按钮标签。:visited选择器用于选择已访问的“链接”，因此它只在具有href字段的锚标记上工作。
来自w3schools：
由于安全问题，浏览器限制了可以为访问的链接设置的样式。 允许使用的样式如下： 颜色 背景颜色 边框颜色(不同边的边框颜色) 轮廓颜色 柱规则颜色 填充和笔画的颜色部分--所有其他样式--都是从一个:链接继承的。
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。如果您还希望在页面重新加载之后保持样式，那么您必须使用会话从后端执行此操作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54545567
复制相关文章
相似问题
腾讯云开发者
