Switch the text style when hovering, then switch it back upon second hovering

Question

Switch the text style when hovering, then switch it back upon second hovering

Searching for a method to modify the font of individual letters when hovering over them. The goal is for the letters to revert back to their original font after a second hover (not on the first hover-off).

Any assistance would be greatly valued!

javascript css fonts mouseover

Answer 1

Answer №1

Using ClassList for CSS Styling

Find more information about classList here

Check browser support for classList

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>

Handling CSS Styling without 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

Using ClassList for CSS Styling

Find more information about classList here

Check browser support for classList

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>

Handling CSS Styling without 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 3

Answer №2

Check out this easy jQuery example:

let hoverCounter = 0;
$('.post-text').hover(function(){

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

    if(hoverCounter == 1){
        $(this).addClass('new-font');//or $(this).css('font-family', 'Arial');
    } else if(hoverCounter == 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"
}

If you want to make each letter changeable, you'll need a separate <span> for each one. You can automate this process using https://github.com/davatron5000/Lettering.js.

Answer 4

Check out this easy jQuery example:

let hoverCounter = 0;
$('.post-text').hover(function(){

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

    if(hoverCounter == 1){
        $(this).addClass('new-font');//or $(this).css('font-family', 'Arial');
    } else if(hoverCounter == 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"
}

If you want to make each letter changeable, you'll need a separate <span> for each one. You can automate this process using https://github.com/davatron5000/Lettering.js.

Switch the text style when hovering, then switch it back upon second hovering

Answer №1

Using ClassList for CSS Styling

Handling CSS Styling without ClassList

Answer №2

Similar questions

A step-by-step guide on how to refresh a circular loading indicator

Tips for resolving div overlap issues when utilizing a customized div within a container-fluid layout (Bootstrap)

Aligning HTML headers in a horizontal manner

Bring your images to life with a captivating 3D hover effect

I need help figuring out how to get a horizontal scrollbar positioned at the top of a div to function properly once the content has been loaded using ajax

What is the best way to arrange an array in either javascript or typescript based on a specific key, and in the case of identical keys,

Creating a default option in a Select tag with React when iterating over elements using the map method

Tips for returning JSON data using AJAX

Error handling middleware delivering a response promptly

Creating custom elements for the header bar in Ionic can easily be accomplished by adding your own unique design elements to the header bar or

Having trouble with my Bootstrap 4 navbar button - what am I doing wrong?

The size of the search input and textarea in HTML decreases when viewed on an iPad device

What are the best strategies for optimizing my CSS drop down menu to be both responsive and mobile-friendly?

Ways to empty an angularJS array

Tips for adjusting the Bootstrap grid layout for mobile viewing

Using JavaScript, generate ten clickable circles on the screen. Each circle should display the number of times it has been clicked in the center when interacted with

Tips for effectively utilizing CSS classes with current-device

Troubleshooting the issue: Uncaught TypeError when trying to read property 'substr' of undefined while passing parameters in JavaScript

Learn how to dynamically chain where conditions in Firebase without prior knowledge of how many conditions will be added

CSS slideshow with automatic horizontal image transition that seamlessly restarts