0

Всем привет

Сделал кнопку пуск/пауза для сайта, вот минимальный код:

body {
  background-color: #494949;
}

.play-button {
  display: table;
  margin-left: auto;
  margin-right: auto;
  background-color: #888;
  color: green;
  font-size: 30px;
  text-align: center;
  width: 1.2em;
  padding: .2em;
  border-radius: 10%;
  cursor: pointer;
  appearance: none;
}

.play-button:after {
  content: "\25B6";
}

.play-button:checked:after {
  content: "\23F8";
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <input type="checkbox" class="play-button" title="play">
</body>

</html>

Всё работает без js, только не могу найти как после нажатия кнопки менять значение атрибута title. Возможно ли это сделать средствами CSS? 

2 ответа 2

2

С помощью CSS нельзя изменять атрибуты элементов. Можно попробовать имитировать подсказку, используя псевдоэлемент:

body { background-color: #494949; }

.play-button {
  appearance: none;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  place-items: center;
  padding: 1em .5em;
  border-radius: 10%;
  text-align: center;
  color: green;
  background-color: #888;
  cursor: pointer;
}

.play-button::before {
  content: '';
  display: block;
  height: 10px; width: 10px;
  box-sizing: border-box;
  border: 5px solid transparent;
  border-left: 10px solid currentcolor;
  border-right: 0px solid currentcolor;
}
.play-button:checked::before {
  border: 0px solid transparent;
  border-left: 4px solid currentcolor;
  border-right: 4px solid currentcolor;
}

.play-button:hover::after {
  content: 'Play';
  position: absolute;
  top: 110%;
  padding: 1px 4px;
  border: 1px solid #222;
  border-radius: 3px;
  font-size: 12px;
  color: #444;
  background-color: #fff;
  box-shadow: 1px 3px 3px #0004;
}
.play-button:checked:hover::after {
  content: 'Stop';
}
 <input type="checkbox" class="play-button">

Также не рекомендуется использовать HTML-символы, ибо они есть не в каждом шрифте. Или если шрифт не прогрузиться, то оба состояния кнопки будут иметь не те символы, которые ожидаются. Лучше делать такие фигуры через CSS, SVG или картинку.

0

Я сам много пытался найти где способ поменять title, но боюсь что через CSS, атрибут title никак не поменять, вы можете это сделать с помощью JS:

document.querySelector(".play-button").addEventListener("click", function(){
    if(this.getAttribute("title") === "playing"){
        this.setAttribute("title", "play")
    }else{
        this.setAttribute("title", "playing")
    }
});
body {
  background-color: #494949;
}

.play-button {
  display: table;
  margin-left: auto;
  margin-right: auto;
  background-color: #888;
  color: green;
  font-size: 30px;
  text-align: center;
  width: 1.2em;
  padding: .2em;
  border-radius: 10%;
  cursor: pointer;
  appearance: none;
}

.play-button:after {
  content: "\25B6";
}

.play-button:checked:after {
  content: "\23F8";
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <input type="checkbox" class="play-button" title="play">
</body>

</html>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.