Question

我有一个CSS形状，可作为某些音频的停止按钮：

.double-border {
  background-color: #f1f1f1;
  border: 2px solid black;

  width: 2em;
  height: 2em;
  position: relative;
  margin: 0 auto;
}
.double-border:before {
  background: black;

  content: "";
  display: block;
  position: absolute;
  top: 7px;
  left: 7px;
  right: 7px;
  bottom: 7px;
  pointer-events: none;
}

单击该按钮时，它会在单击过程中更改颜色，并在释放单击时返回原始颜色。

我通过创建两个函数来实现这一目标：

function toggleStop(param) {

param.setAttribute("style", "background-color: #C8C8C8;");

}

function toggleStart(param) {

param.setAttribute("style", "background-color: #f1f1f1;");

}

一个函数用于onmousedown事件，一个用于onmouseup事件。

<div class="double-border" onclick="stop();" onmousedown="toggleStop(this);" onmouseup="toggleStart(this);">

除非用户按住咔嗒声并同时将鼠标指针移离按钮，否则此类工作无效。在这种情况下，按钮仍然是我不想要的onmousedown颜色。

有没有更好的方法可以在没有太多额外代码的情况下实现这一目标？

Answer 1

你用纯css试过这个吗？

.double-border:active,.double-border:focus {
background-color: #f1f1f1;
}

.double-border {
  background-color: #f1f1f1;
  border: 2px solid black;

  width: 2em;
  height: 2em;
  position: relative;
  margin: 0 auto;
}
.double-border:before {
  background: black;

  content: "";
  display: block;
  position: absolute;
  top: 7px;
  left: 7px;
  right: 7px;
  bottom: 7px;
  pointer-events: none;
}
.double-border:active,.double-border:focus {
background-color: #888;
}

<div class="double-border" onclick="stop();"></div>

仅在鼠标单击事件期间更改颜色

1 个答案: