鼠标悬停时更改字体并在第二次鼠标移动时将字体恢复原状

Question

我正在寻找一种方法来改变单个字母上的字体。我希望当您再次将鼠标悬停在原始字体上时，这些字母会更改为原始字体（而不是第一次将鼠标移开时）。

非常感谢任何和所有帮助！

Answer 1

使用classList

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>

没有classList

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>

Answer 2

这里是简单的jQuery示例

var hoveredCounter = 0;
$('.post-text').hover(function(){

    //hover in
    hoveredCounter++;
    //console.log(hoveredCounter);

    if(hoveredCounter == 1){
        $(this).addClass('new-font');//or $(this).css('font-family', 'Arial');
    } else if(hoveredCounter == 2) {
        $(this).removeClass('new-font');//or $(this).css('font-family', 'Verdana');
    }
}, function(){
    //hover out
})

.old-font{
    font-family: "Arial";
}

.old-font.new-font{ /* using 2 classnames so the rule will have bigger priority*/
    font-family: "Verdana"
}

如果您希望每封信都可更改，则每个字母都需要单独<span>。您可以通过https://github.com/davatron5000/Lettering.js

自动执行此操作