Javascript-按类更改样式-鼠标

Question

我想通过mouseover / mouseout事件来更改所有类的样式。

var shadow = document.getElementsByClassName('shadow-primary');


for (var k = 0; k < shadow.length; k++) {
  var hi = shadow[k]
  hi.onmouseover = function() {
    hi.style["box-shadow"] = "10px 10px 10px #1D618C, 5px 5px 5px #1D618C";
    //console.log(hi);
  }
  hi.onmouseout = function() {
    hi.style["box-shadow"] = "none";
    //console.log(hi);
  }
}

<div class="panel panel-primary shadow-primary">
  <div class="panel-heading">
    <h3 class="panel-title">TESTING</h3>
  </div>
  <div class="panel-body">
    <strong>TEST0</strong>
  </div>
</div>

<br><br><br><br>

<div class="panel panel-primary shadow-primary">
  <div class="panel-heading">
    <h3 class="panel-title">TESTING</h3>
  </div>
  <div class="panel-body">
    <strong>TEST1</strong>
  </div>
</div>

我的问题是您在代码段中看到的。我的for循环编码错误的原因是最后一个数组正在执行我想要的操作。

您能告诉我如何使用“ shadow-primary”类对所有元素进行代码处理。

[请回答没有答案，如何使用HTML事件处理程序。TY：）