div或按钮鼠标经过或鼠标点击后效果样式

div或按钮鼠标经过或鼠标点击后效果样式

active：鼠标经过后的样式
focus：鼠标点击后的样式

如果是div，必须加上 tabindex="1"，否则，focus失效

<div class="diagonal-layout">
  <div class="diagonal-tool1" tabindex="1"></div>
  <div class="diagonal-tool2" tabindex="1"></div>
</div>

.diagonal-tool1 {
  width: 35px;
  height: 35px;
  background: url('../assets/img/图标9.png') no-repeat center/contain;
}
.diagonal-tool1:focus {
  background: url('../assets/img/图标9-选中.png') no-repeat center/contain;
}