javascript - 我的项目是虚拟钢琴，当用户单击键盘键时，我需要的是钢琴按钮获得悬停颜色

我正在使用javascript钢琴应用程序，我需要在用户单击键83时将钢琴按钮悬停，但是在用户释放键后，该按钮恢复为原始颜色

我试图添加样式。背景='绿色';但是它会永远改变按钮的颜色

var a = document.getElementById("mydo"); /* div 'piano button' */

if(key===83){
    DO();
     a.style.background = 'gold'; /* This Wrong Change color forver */
}

当我使用鼠标单击按钮时，我需要类似悬停的操作，这意味着在按住键并完成操作后颜色再次变回透明状态

最佳答案

您可以使用mousedown和mouseup事件来更改项目的背景颜色

const keys = document.getElementsByClassName("key");

for (let i = 0; i < keys.length; i++) {
  const key = keys.item(i);
  key.addEventListener("mousedown", function() {
    this.style.backgroundColor = "gold";
  });
  key.addEventListener("mouseup", function() {
    this.style.backgroundColor = "ghostwhite";
  });
}

.key {
  display: inline-block;
  width: 50px;
  height: 175px;
  background-color: ghostwhite;
  border: 1px solid black;
  text-align: center;
}

<div id="do" class="key">do</div>
<div id="re" class="key">re</div>
<div id="mi" class="key">mi</div>
<div id="fa" class="key">fa</div>
<div id="sol" class="key">sol</div>
<div id="la" class="key">la</div>
<div id="si" class="key">si</div>

关于javascript - 我的项目是虚拟钢琴，当用户单击键盘键时，我需要的是钢琴按钮获得悬停颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58622041/