鼠标移到上面时更改字体，第二次移到上面时恢复字体

Change font on mouse over and revert font back when mousing over a second time

本文关键字：字体 到上面 第二次 恢复 鼠标      更新时间：2023-09-26

我正在寻找一种方法来改变单个字母的字体时，鼠标在他们。我希望单个字母改变回原来的字体，当你鼠标在他们第二次(而不是当你第一次鼠标离开)。

任何和所有的帮助是超级感激!

使用

文档

浏览器支持

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>

这是一个简单的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

相关文章：