How do you change a background color to a specific class with hovering in Javascript

Question

I have three div's with the class of colorBox . I want to hover over each one of them and when I do that I want each of them to change their background color to a different. The problem is.. I don't know how to do that. I'm assuming that you need to use the this keyword. But, I don't think I'm using it right

CSS

<style type="text/css">
.colorBox{ width:200px; min-height:300px; color:white; 
background:black; display:inline-block; padding:0 7px; text-align:center; }
.colorBox h2 { border-bottom:2px solid white;}
</style>

HTML

<div class="colorBox"><h2>Text Header</h2><p>Asymmetrical wolf letterpress, photo booth cornhole occupy tattooed portland fanny pack distillery offal roof party blog. Health goth cray four loko flannel 8-bit organic, gochujang waistcoat. Keytar franzen mumblecore, ennui stumptown etsy meditation YOLO cray 3 wolf moon waistcoat pop-up poutine tattooed austin. Shabby chic brooklyn keytar normcore whatever <p></div>
<div class="colorBox"><h2>Text Header</h2><p>Asymmetrical wolf letterpress, photo booth cornhole occupy tattooed portland fanny pack distillery offal roof party blog. Health goth cray four loko flannel 8-bit organic, gochujang waistcoat. Keytar franzen mumblecore, ennui stumptown etsy meditation YOLO cray 3 wolf moon waistcoat pop-up poutine tattooed austin. Shabby chic brooklyn keytar normcore whatever <p></div>
<div class="colorBox"><h2>Text Header</h2><p>Asymmetrical wolf letterpress, photo booth cornhole occupy tattooed portland fanny pack distillery offal roof party blog. Health goth cray four loko flannel 8-bit organic, gochujang waistcoat. Keytar franzen mumblecore, ennui stumptown etsy meditation YOLO cray 3 wolf moon waistcoat pop-up poutine tattooed austin. Shabby chic brooklyn keytar normcore whatever <p></div>

Javascript

(function(){

  var a = document.getElementsByClassName('colorBox');
  this.a = a;  
  this.style.background = 'black';

  function hoverColor()
  {
    if (this.a == a[0])
    {
     this.style.background = 'green';

    }
    else if(this.a == a[1])
    {
      this.style.background = 'blue';
    }
    else if(this.a == a[2])
    {
      this.style.background = 'red';
    }
  }

  for(var i = 0; i < a.length; ++i)
  {
    a[i].addEventListener('mouseover', hoverColor.bind(this));
  }

})();

Answer 1

(function(){

    var a = document.getElementsByClassName('colorBox');

    function addHover(index) {
        return function(){
            var backgroundColor = 'black';

            switch (index) {
                case 0:
                    backgroundColor = 'green';
                    break;
                case 1:
                    backgroundColor = 'blue';
                    break;
                case 2:
                    backgroundColor = 'red';
                    break;
            }

            if (a[index]) {
                a[index].style.background = backgroundColor;
            }
        };
    }

    for (var i = 0; i < a.length; ++i) {
        a[i].addEventListener('mouseover', addHover(i));
    }

})();

Answer 2

the keyword this in JavaScript that behavior is runtime context.

for example：

var f = function() {
  var name = "OUT";
  return function() {
    console.log(this.name)
  }
}
f()()  // undefined  this.name == window.name

the result will be undefined , why was that? we run the function f and return a closure function, and continue to processing, but this time the this referencing the window object.

var name = "WINDOW"
var f = function() {
  var name = "OUT";
  return function() {
    console.log(this.name)
  }
 }
 f()()  // WINDOW

How to fix that， referencing this by that .

var f = function() {
  var name = "OUT";
  var that = this
  return function() {
    console.log(that.name)
  }
}
f()()  // OUT

for more information https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

(Sorry, My English always shit.)

Answer 3

The easiest way is by using jQuery:

$(".ColorBox").hover(function() {
        $(".ColorBox").css("background", newColor);
    },
    function() {
        $(".ColorBox").css("background", "black");
    });

The first function will be called when the mouse moves over the element, and the second will be called when it leaves. It's a combination of mouseenter and mouseexit. Since you want to change it for every element of this class, we use the class itself, rather than "this".