Изменить значение атрибута title с помощью CSS

Question

Всем привет

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

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?

Answer 1

Я сам много пытался найти где способ поменять 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>

Answer 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 или картинку.

БЛОГ НА HUSL

Изменить значение атрибута title с помощью CSS

Ответы (2 шт):