Как изменить цвет фона «посещенной» кнопки в CSS? - PullRequest
Новая
       2

Как изменить цвет фона «посещенной» кнопки в CSS?

0 голосов
/ 06 февраля 2019

Я пытаюсь изменить цвет фона кнопки после ее нажатия (и возможно сделать так, чтобы вы не могли щелкнуть ее снова), но не могу понять, как изменить цвет.Я хотел бы использовать только 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>

Ответы [ 3 ]

0 голосов
/ 06 февраля 2019

Вы не можете использовать только HTML и CSS;вам нужен JavaScript.Обратите внимание, что в вашей кнопке onclick="onClick()" была функция JavaScript .

С помощью JavaScript вы можете изменить имя класса кнопки на button visited, что делает CSS-селектор .button и .visited work.

Обратите внимание, что :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 &lt;a&gt; visited</a>
</body>
</html>

Обновление

Если у вас было более 1 элемента для события 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
0 голосов
/ 06 февраля 2019

Вы можете делать то, что хотите, но не с помощью тега кнопки.Селектор :visited используется для выбора посещаемых «ссылок», и поэтому он работает только с тегом привязки с полями href.

Из w3schools:

Браузеры ограничивают стили, которые могутбыть установленным для: посещенных ссылок из-за проблем безопасности.

Допустимые стили:

color
background-color
border-color (и border-color для отдельных сторон)
цвет контура
цвет столбца-правила
цвет частей заливки и обводки

Все остальные стили наследуются от: 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.Если вы также хотите, чтобы стиль оставался после перезагрузки страницы, то вы должны сделать это из бэкэнда, используя сеансы.

0 голосов
/ 06 февраля 2019

Вы должны использовать :visited для ссылок, а не button в одиночку.Подумайте об использовании тега a вместо button, например: 

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

Если вы хотите, чтобы он не щелкался после первого щелчка, вы также можете добавить код JavaScript, ссылающийся на onclickфункция, как это: 

function onClick () {
   this.style.pointerEvents = "none";
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...