0

i want to change the Style of all Classes by an mouseover / mouseout event.

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>

My Problem is as you can see in the Code Snippet. Cause of my bad coded for loop just the last array is doing what i want.

Could you tell me how it is possible to doing the code Work with all Elements with the Class "shadow-primary".

Please no answers how to do that with an HTML Event Handler. TY :)

Lelio Faieta
  • 6,457
  • 7
  • 40
  • 74
EvVox
  • 11
  • 4
  • How about answers that show how to do it with just CSS? – Heretic Monkey Jan 23 '20 at 13:09
  • No i know how to 'hover' but thats not the answer i am looking for. – EvVox Jan 23 '20 at 13:10
  • Use this Code: var shadow = document.querySelectorAll('.shadow-primary'); console.log(shadow); for (let 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); } } – Gaurav Kandpal Jan 23 '20 at 13:24

0 Answers0