显示按钮的隐藏描述

Question

我希望有一个功能，当您单击按钮时，它将显示相应字母的定义。就像单击按钮D一样，它应该显示指定的定义。

#container {
  text-align: center;
}

.button {
  display: inline-block;
  padding: 7px 17px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: red;
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px #323;
  height: auto;
  width: auto;
  font-weight: bold;
}

.button:hover {
  background-color: #DB1023
}

.button:active {
  background-color: #A30406;
  box-shadow: 0 5px #333;
  transform: translateY(4px);

<button class="button">A</button>
<button class="button">B</button>
<button class="button">C</button>
<button class="button">D</button>
<button class="button">E</button>
<button class="button">F</button>
<button class="button">G</button>
<button class="button">H</button>
<button class="button">I</button>
<button class="button">J</button>
<button class="button">K</button>
<button class="button">L</button>
<button class="button">M</button>

Answer 1

我会做这样的事情：

var letters = {
  "A": "A Definition.",
  "B": "B Definition.",
  "C": "C Definition.",
  "D": "D Definition.",
  "E": "E Definition.",
  "F": "F Definition.",
  "G": "G Definition.",
  "H": "H Definition.",
  "I": "I Definition.",
  "J": "J Definition.",
  "K": "K Definition.",
  "L": "L Definition.",
  "M": "M Definition.",
  "N": "N Definition.",
  "O": "O Definition.",
  "P": "P Definition.",
  "Q": "Q Definition.",
  "R": "R Definition.",
  "S": "S Definition.",
  "T": "T Definition.",
  "U": "U Definition.",
  "V": "V Definition.",
  "W": "W Definition.",
  "X": "X Definition.",
  "Y": "Y Definition.",
  "Z": "Z Definition."
};
var finalHTML = "";
Object.keys(letters).forEach(function(l) {
  finalHTML += '<div><button title="' + letters[l] + '">' + l + '</button><span>' + letters[l] + '</span></div>';
});
document.getElementById("output").innerHTML = finalHTML;

button {
  padding: 3px 5px;
  width: 25px;
  margin: 5px;
}

span {
  display: none;
  vertical-align: middle;
}

button:active+span,
button:focus+span {
  display: inline-block;
  margin-left: 10px;
}

<div id="output"></div>