javascript - 鼠标悬停时更改字体，第二次悬停时恢复字体

Question

我正在寻找一种方法来在将鼠标悬停在单个字母上时更改它们的字体。我希望当您第二次将鼠标悬停在单个字母上时(而不是第一次将鼠标移开时)，它们会变回其原始字体。

非常感谢任何帮助!

Answer 1

通过使用类列表

Documentation

Browser support

var elLi = document.querySelectorAll('li');

for (var i = 0; i < elLi.length; i++){
  elLi[i].onmouseover = function(){
    this.classList.toggle("times");
  }
}

body {
  font-family: 'Arial';
}
li {
  margin: 10px 0;
}
.times {
  font-family: 'Times';
}

<ul>
  <li>Text 1</li>
  <li>Text 2</li>
</ul>

没有类列表

var elLi = document.querySelectorAll('li');

for (var i = 0; i < elLi.length; i++){
  elLi[i].onmouseover = function(){
    if (hasClass(this, 'times')) {
    	this.className = "";
      // Remove class
    } else {
      // Add class
      this.className = "times";
    }
  }
}

function hasClass( target, className ) {
    return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}

body {
  font-family: 'Arial';
}
li {
  margin: 10px 0;
}
.times {
  font-family: 'Times';
}

<ul>
  <li>Text 1</li>
  <li>Text 2</li>
</ul>