如何在有悬停效果的情况下使两行12个区块响应

<div class="row">
  <div class="block">区块1</div>
  <div class="block">区块2</div>
  ...
  <div class="block">区块12</div>
</div>
<div class="row">
  <div class="block">区块13</div>
  <div class="block">区块14</div>
  ...
  <div class="block">区块24</div>
</div>

.row {
  display: flex;
  justify-content: space-between;
}

.block {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  border: 1px solid #000;
  transition: background-color 0.3s ease;
}

.block:hover {
  background-color: #f00;
}

var blocks = document.querySelectorAll('.block');
blocks.forEach(function(block) {
  block.addEventListener('mouseover', function() {
    // 在这里添加响应效果的代码
    block.style.transform = 'scale(1.2)';
  });
  block.addEventListener('mouseout', function() {
    // 在这里添加恢复原始样式的代码
    block.style.transform = 'scale(1)';
  });
});