如何将背景颜色更改为在Javascript中悬停的特定类

Question

我在colorBox的班上有三个div。我想要悬停在他们每一个，当我这样做，我希望他们每一个改变他们的背景颜色不同。问题是..。我不知道该怎么做。我假设您需要使用this关键字。但是，我不认为我用得对

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

行为为运行时上下文的this关键字在JavaScript中。

例如：

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

结果将是undefined，为什么呢？我们运行函数f并返回一个闭包函数，并继续处理，但这次是引用窗口对象的this。

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

如何解决这个问题，通过that引用that。

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

有关更多信息，https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

(对不起，我的英语总是糟透了。)

Answer 3

最简单的方法是使用jQuery：

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

当鼠标移动到元素上时，第一个函数将被调用，第二个函数将在它离开时被调用。它是鼠标和鼠标出口的组合。由于您希望对该类的每个元素进行更改，所以我们使用类本身，而不是" this“。