Question

我有三个div与 colorBox 类。我想将鼠标悬停在每一个上面，当我这样做时，我希望他们每个人都将背景颜色改变为不同的颜色。问题是..我不知道该怎么做。我假设你需要使用 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

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

例如：

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

如何解决此问题，this引用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");
    });

当鼠标在元素上移动时，将调用第一个函数，第二个函数在离开时将被调用。它是mouseenter和mouseexit的组合。由于你想为这个类的每个元素更改它，我们使用类本身，而不是＆＃34;这个＆＃34;。

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

3 个答案: