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));
  }

})();

Is there any reason you can't do this using the CSS `:hover` selector? — SimpleJ, Apr 04 '16 at 03:13
Are you trying to change the background of the entire document or of each `
` individually on-hover? For the former, the global object (default value of `this`) doesn't have a `.style` object to modify. Perhaps you meant `document.body.style.background = ...`. — Jonathan Lonowski, Apr 04 '16 at 03:19
here is a cool resource that might help you: http://youmightnotneedjquery.com/ — omarjmh, Apr 04 '16 at 04:25

sadpanda · Answer 1 · 2016-04-04T04:08:24.000

3

(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));
    }

})();

edited Apr 04 '16 at 04:08

answered Apr 04 '16 at 04:00

sadpanda

213
1
10

this is excellent, almost there, just throw the mouseleave stuff in and youre good!: – omarjmh Apr 04 '16 at 04:18
a[index].addEventListener('mouseleave', function(){ if (a[index]) { a[index].style.background = 'black'; } }) ________________ sorry, cant seem to format this code – omarjmh Apr 04 '16 at 04:20

Muge · Answer 2 · 2016-04-04T03:24:21.143

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.)

score 0 · Answer 3 · answered Apr 04 '16 at 03:20

0

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".

answered Apr 04 '16 at 03:20

buchWyrm

127
10

If you want each box to result in it turning them a different color you can replace the ".ColorBox" on the first line with "#myId", where myId is the ID of a specific element, and repeat for each additional element. You'd just need to plug in IDs for each of them then. – buchWyrm Apr 04 '16 at 03:30
Yes, I know how to do it jquery. But, I need to know how to do it javascript – black_yurizan Apr 04 '16 at 03:41

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

3 Answers3