时间戳

首页 > 解决方案 > Javascript - 按类更改样式 - onmouse

javascript - Javascript - 按类更改样式 - onmouse

问题描述

我想通过 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 事件处理程序来做到这一点。泰:)

标签： javascripthtmlfor-looponmouseovergetelementsbyclassname

解决方案

推荐阅读