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

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

本文关键字：颜色 背景 Javascript 悬停      更新时间：2023-11-26

我有三个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));
  }
})();


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

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

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

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

（对不起，我的英语总是很糟糕。）

最简单的方法是使用jQuery:

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

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

相关文章：