Show different text or letter when hovering

Question

Show different text or letter when hovering

Is there a way to hide one letter and display another in a link, with a different style on hover? For example:

This is a...

...regular link.

And this is a...

...hovered link.

Any ideas on how to make this happen? Thank you.

Edit: Just to clarify — I'm looking to change specific letters (i ➛ î, e ➛ ê) and apply a style change on hover, without altering the entire link structure.

The code snippet shared by the individual who asked this question

$('.class').hover(function()
{
$(this).data('i', $(this).text());
$(this).text("î");
},
function()
{
$(this).text($(this).data('i'));
}
);

It almost provided the solution. However, it currently changes the entire link rather than just the letters.

jquery css effect

Answer 1

Answer №1

That was quite an entertaining experience! Here's a little fun activity involving random letter substitutions with accents. It might be a bit too intense for your liking, but feel free to customize it by removing the letter substitutions you don't want.

var diacriticsMap = [ { 'base':'A', 'letters':[ '\u0041','\u24B6','\uFF21','\u00C0','\u00C1','\u00C2','\u1EA6','\u1EA4','\u1EAA','\u1EA8','\u00C3','\u0100','\u0102','\u1EB0','\u1EAE','\u1EB4','\u1EB2','\u0226','\u01E0','\u00C4','\u01DE','\u1EA2','\u00C5','\u01FA','\u01CD','\u0200','\u0202','\u1EA0','\u1EAC','\u1EB6','\u1E00','\u0104','\u023A','\u2C6F']}, {'base':'AA','letters':['\uA732']}, {'base':'AE','letters':['\u00C6','\u01FC','\u01E2']}, {'base':'AO','letters':['\uA734']}, {'base':'AU','letters':['\uA736']}, {'base':'AV','letters':['\uA738','\uA73A']}, {'base':'AY','letters':['\uA73C']}, {'base':'B', 'letters':['\u0042','\u24B7','\uFF22','\u1E02','\u1E04','\u1E06','\u0243','\u0182','\u0181']}, {'base':'C', 'letters':['\u0043','\u24B8','\uFF23','\u0106','\u0108',...
// and so on

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul>
  <li><a class="flip-me" href="#">Unlocking ancient secrets</a></li>
  <li><a class="flip-me" href="#">Discovering hidden realms</a></li>
  <li><a class="flip-me" href="#">Exploring mystical lands</a></li>
  <li><a class="flip-me" href="#">Unraveling enchanted tales</a></li>
</ul>

Answer 2

That was quite an entertaining experience! Here's a little fun activity involving random letter substitutions with accents. It might be a bit too intense for your liking, but feel free to customize it by removing the letter substitutions you don't want.

var diacriticsMap = [ { 'base':'A', 'letters':[ '\u0041','\u24B6','\uFF21','\u00C0','\u00C1','\u00C2','\u1EA6','\u1EA4','\u1EAA','\u1EA8','\u00C3','\u0100','\u0102','\u1EB0','\u1EAE','\u1EB4','\u1EB2','\u0226','\u01E0','\u00C4','\u01DE','\u1EA2','\u00C5','\u01FA','\u01CD','\u0200','\u0202','\u1EA0','\u1EAC','\u1EB6','\u1E00','\u0104','\u023A','\u2C6F']}, {'base':'AA','letters':['\uA732']}, {'base':'AE','letters':['\u00C6','\u01FC','\u01E2']}, {'base':'AO','letters':['\uA734']}, {'base':'AU','letters':['\uA736']}, {'base':'AV','letters':['\uA738','\uA73A']}, {'base':'AY','letters':['\uA73C']}, {'base':'B', 'letters':['\u0042','\u24B7','\uFF22','\u1E02','\u1E04','\u1E06','\u0243','\u0182','\u0181']}, {'base':'C', 'letters':['\u0043','\u24B8','\uFF23','\u0106','\u0108',...
// and so on

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul>
  <li><a class="flip-me" href="#">Unlocking ancient secrets</a></li>
  <li><a class="flip-me" href="#">Discovering hidden realms</a></li>
  <li><a class="flip-me" href="#">Exploring mystical lands</a></li>
  <li><a class="flip-me" href="#">Unraveling enchanted tales</a></li>
</ul>

Answer 3

Answer №2

$('#box').click(function(){
  $(this).toggleClass('bold');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="box">Click Me</div>

Answer 4

$('#box').click(function(){
  $(this).toggleClass('bold');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="box">Click Me</div>

Answer 5

Answer №3

With the use of jQuery, achieving this task is simple. See below for a sample code snippet.

HTML CODE

<p class="c-hover">Normal Text</p>
//assign the "c-hover" class to the desired element

JS CODE

$('.c-hover').hover(function(){
 $(this).text('Hover Text'); //displayed text on hover
},function(){
 $(this).text('Normal Text'); //original text when not hovering
});

Answer 6

With the use of jQuery, achieving this task is simple. See below for a sample code snippet.

HTML CODE

<p class="c-hover">Normal Text</p>
//assign the "c-hover" class to the desired element

JS CODE

$('.c-hover').hover(function(){
 $(this).text('Hover Text'); //displayed text on hover
},function(){
 $(this).text('Normal Text'); //original text when not hovering
});

Show different text or letter when hovering

Answer №1

Answer №2

Answer №3

Similar questions

Why must the sidebar be displayed horizontally on the smartphone screen?

Exploring feature detection in jQuery version 1.4

Try utilizing an image to hold text content rather than a traditional div container

jQuery fails to apply a class if the input fields are not empty

Using jQuery and JavaScript: The recursive setTimeout function I created accelerates when the tab is no longer active

Tips on avoiding the collapse of the right div when positioned under a left float in a full page layout

Steps to fix the issue: Unhandled Type Error: t.addLayer is not a recognized function

django is not able to load staticfiles from the statifiles_dirs directory

Demonstrating the concept of a hierarchical matrix in D3: A detailed

Creating an overlay effect when hovering over an image

What is the process for setting an AMP-video as a full-page background?

Tips for deciding on the appropriate CSS for an Angular 6 navbar component

Steps to create a hover effect that alters the appearance of another chosen "element"

"Unexpected issue with jQuery AJAX Post functionality on a shared server causing data not to

Exploring how to utilize AJAX for data filtering within the Laravel framework has piqued

Converting JSON data to an array using an Ajax request

Here's a solution to prevent the "jump" effect when hiding elements in a navbar

Jquery animated auto

Align the text characters vertically within a word or sentence

Navigation dropdown menu with the latest Bootstrap 4 features