Display another text/letter on hover

Question

I want to hide one letter, and display another in a link, with different style of the letters-on-hover, of course. For example:

This is a...

...normal link.

And this is a...

...hovêrêd lînk.

How to achieve this? Thank you.

Edit: Yes, a needed clarification — I want only to change specific letters (i ➛ î, e ➛ ê) and to change style on hover, not the entire link, because the link is same both normal and hovered.

The guy who posted this

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

Was close to solution. Only this piece of code changes the entire link on hover, not just letters.

Nothing yet. I don’t know from where to start. That’s why I didn’t post any examples. — , Nov 08 '16 at 07:29
It would be helpful to clarify some things, such as by "different style" do you mean change all letters that have an accented form to that form? What if they've got multiple accented forms? — Fiddles, Nov 08 '16 at 07:49
Also, you can find how to do the on-hover stuff in many other questions, such as http://stackoverflow.com/questions/18301138/change-text-on-hover-using-jquery — Fiddles, Nov 08 '16 at 07:49

Fiddles · Answer 1 · 2016-11-10T02:01:19.357

Well that was fun. Here's something to randomly do some letter subtitutions with accents. This is probably too aggressive for what you're after, but you could remove 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','\u010A','\u010C','\u00C7','\u1E08','\u0187','\u023B','\uA73E']},
        {'base':'D', 'letters':['\u0044','\u24B9','\uFF24','\u1E0A','\u010E','\u1E0C','\u1E10','\u1E12','\u1E0E','\u0110','\u018B','\u018A','\u0189','\uA779']},
        {'base':'DZ','letters':['\u01F1','\u01C4']},
        {'base':'Dz','letters':['\u01F2','\u01C5']},
        {'base':'E', 'letters':['\u0045','\u24BA','\uFF25','\u00C8','\u00C9','\u00CA','\u1EC0','\u1EBE','\u1EC4','\u1EC2','\u1EBC','\u0112','\u1E14','\u1E16','\u0114','\u0116','\u00CB','\u1EBA','\u011A','\u0204','\u0206','\u1EB8','\u1EC6','\u0228','\u1E1C','\u0118','\u1E18','\u1E1A','\u0190','\u018E']},
        {'base':'F', 'letters':['\u0046','\u24BB','\uFF26','\u1E1E','\u0191','\uA77B']},
        {'base':'G', 'letters':['\u0047','\u24BC','\uFF27','\u01F4','\u011C','\u1E20','\u011E','\u0120','\u01E6','\u0122','\u01E4','\u0193','\uA7A0','\uA77D','\uA77E']},
        {'base':'H', 'letters':['\u0048','\u24BD','\uFF28','\u0124','\u1E22','\u1E26','\u021E','\u1E24','\u1E28','\u1E2A','\u0126','\u2C67','\u2C75','\uA78D']},
        {'base':'I', 'letters':['\u0049','\u24BE','\uFF29','\u00CC','\u00CD','\u00CE','\u0128','\u012A','\u012C','\u0130','\u00CF','\u1E2E','\u1EC8','\u01CF','\u0208','\u020A','\u1ECA','\u012E','\u1E2C','\u0197']},
        {'base':'J', 'letters':['\u004A','\u24BF','\uFF2A','\u0134','\u0248']},
        {'base':'K', 'letters':['\u004B','\u24C0','\uFF2B','\u1E30','\u01E8','\u1E32','\u0136','\u1E34','\u0198','\u2C69','\uA740','\uA742','\uA744','\uA7A2']},
        {'base':'L', 'letters':['\u004C','\u24C1','\uFF2C','\u013F','\u0139','\u013D','\u1E36','\u1E38','\u013B','\u1E3C','\u1E3A','\u0141','\u023D','\u2C62','\u2C60','\uA748','\uA746','\uA780']},
        {'base':'LJ','letters':['\u01C7']},
        {'base':'Lj','letters':['\u01C8']},
        {'base':'M', 'letters':['\u004D','\u24C2','\uFF2D','\u1E3E','\u1E40','\u1E42','\u2C6E','\u019C']},
        {'base':'N', 'letters':['\u004E','\u24C3','\uFF2E','\u01F8','\u0143','\u00D1','\u1E44','\u0147','\u1E46','\u0145','\u1E4A','\u1E48','\u0220','\u019D','\uA790','\uA7A4']},
        {'base':'NJ','letters':['\u01CA']},
        {'base':'Nj','letters':['\u01CB']},
        {'base':'O', 'letters':['\u004F','\u24C4','\uFF2F','\u00D2','\u00D3','\u00D4','\u1ED2','\u1ED0','\u1ED6','\u1ED4','\u00D5','\u1E4C','\u022C','\u1E4E','\u014C','\u1E50','\u1E52','\u014E','\u022E','\u0230','\u00D6','\u022A','\u1ECE','\u0150','\u01D1','\u020C','\u020E','\u01A0','\u1EDC','\u1EDA','\u1EE0','\u1EDE','\u1EE2','\u1ECC','\u1ED8','\u01EA','\u01EC','\u00D8','\u01FE','\u0186','\u019F','\uA74A','\uA74C']},
        {'base':'OI','letters':['\u01A2']},
        {'base':'OO','letters':['\uA74E']},
        {'base':'OU','letters':['\u0222']},
        {'base':'OE','letters':['\u008C','\u0152']},
        {'base':'oe','letters':['\u009C','\u0153']},
        {'base':'P', 'letters':['\u0050','\u24C5','\uFF30','\u1E54','\u1E56','\u01A4','\u2C63','\uA750','\uA752','\uA754']},
        {'base':'Q', 'letters':['\u0051','\u24C6','\uFF31','\uA756','\uA758','\u024A']},
        {'base':'R', 'letters':['\u0052','\u24C7','\uFF32','\u0154','\u1E58','\u0158','\u0210','\u0212','\u1E5A','\u1E5C','\u0156','\u1E5E','\u024C','\u2C64','\uA75A','\uA7A6','\uA782']},
        {'base':'S', 'letters':['\u0053','\u24C8','\uFF33','\u1E9E','\u015A','\u1E64','\u015C','\u1E60','\u0160','\u1E66','\u1E62','\u1E68','\u0218','\u015E','\u2C7E','\uA7A8','\uA784']},
        {'base':'T', 'letters':['\u0054','\u24C9','\uFF34','\u1E6A','\u0164','\u1E6C','\u021A','\u0162','\u1E70','\u1E6E','\u0166','\u01AC','\u01AE','\u023E','\uA786']},
        {'base':'TZ','letters':['\uA728']},
        {'base':'U', 'letters':['\u0055','\u24CA','\uFF35','\u00D9','\u00DA','\u00DB','\u0168','\u1E78','\u016A','\u1E7A','\u016C','\u00DC','\u01DB','\u01D7','\u01D5','\u01D9','\u1EE6','\u016E','\u0170','\u01D3','\u0214','\u0216','\u01AF','\u1EEA','\u1EE8','\u1EEE','\u1EEC','\u1EF0','\u1EE4','\u1E72','\u0172','\u1E76','\u1E74','\u0244']},
        {'base':'V', 'letters':['\u0056','\u24CB','\uFF36','\u1E7C','\u1E7E','\u01B2','\uA75E','\u0245']},
        {'base':'VY','letters':['\uA760']},
        {'base':'W', 'letters':['\u0057','\u24CC','\uFF37','\u1E80','\u1E82','\u0174','\u1E86','\u1E84','\u1E88','\u2C72']},
        {'base':'X', 'letters':['\u0058','\u24CD','\uFF38','\u1E8A','\u1E8C']},
        {'base':'Y', 'letters':['\u0059','\u24CE','\uFF39','\u1EF2','\u00DD','\u0176','\u1EF8','\u0232','\u1E8E','\u0178','\u1EF6','\u1EF4','\u01B3','\u024E','\u1EFE']},
        {'base':'Z', 'letters':['\u005A','\u24CF','\uFF3A','\u0179','\u1E90','\u017B','\u017D','\u1E92','\u1E94','\u01B5','\u0224','\u2C7F','\u2C6B','\uA762']},
        {'base':'a', 'letters':['\u0061','\u24D0','\uFF41','\u1E9A','\u00E0','\u00E1','\u00E2','\u1EA7','\u1EA5','\u1EAB','\u1EA9','\u00E3','\u0101','\u0103','\u1EB1','\u1EAF','\u1EB5','\u1EB3','\u0227','\u01E1','\u00E4','\u01DF','\u1EA3','\u00E5','\u01FB','\u01CE','\u0201','\u0203','\u1EA1','\u1EAD','\u1EB7','\u1E01','\u0105','\u2C65','\u0250']},
        {'base':'aa','letters':['\uA733']},
        {'base':'ae','letters':['\u00E6','\u01FD','\u01E3']},
        {'base':'ao','letters':['\uA735']},
        {'base':'au','letters':['\uA737']},
        {'base':'av','letters':['\uA739','\uA73B']},
        {'base':'ay','letters':['\uA73D']},
        {'base':'b', 'letters':['\u0062','\u24D1','\uFF42','\u1E03','\u1E05','\u1E07','\u0180','\u0183','\u0253']},
        {'base':'c', 'letters':['\u0063','\u24D2','\uFF43','\u0107','\u0109','\u010B','\u010D','\u00E7','\u1E09','\u0188','\u023C','\uA73F','\u2184']},
        {'base':'d', 'letters':['\u0064','\u24D3','\uFF44','\u1E0B','\u010F','\u1E0D','\u1E11','\u1E13','\u1E0F','\u0111','\u018C','\u0256','\u0257','\uA77A']},
        {'base':'dz','letters':['\u01F3','\u01C6']},
        {'base':'e', 'letters':['\u0065','\u24D4','\uFF45','\u00E8','\u00E9','\u00EA','\u1EC1','\u1EBF','\u1EC5','\u1EC3','\u1EBD','\u0113','\u1E15','\u1E17','\u0115','\u0117','\u00EB','\u1EBB','\u011B','\u0205','\u0207','\u1EB9','\u1EC7','\u0229','\u1E1D','\u0119','\u1E19','\u1E1B','\u0247','\u025B','\u01DD']},
        {'base':'f', 'letters':['\u0066','\u24D5','\uFF46','\u1E1F','\u0192','\uA77C']},
        {'base':'g', 'letters':['\u0067','\u24D6','\uFF47','\u01F5','\u011D','\u1E21','\u011F','\u0121','\u01E7','\u0123','\u01E5','\u0260','\uA7A1','\u1D79','\uA77F']},
        {'base':'h', 'letters':['\u0068','\u24D7','\uFF48','\u0125','\u1E23','\u1E27','\u021F','\u1E25','\u1E29','\u1E2B','\u1E96','\u0127','\u2C68','\u2C76','\u0265']},
        {'base':'hv','letters':['\u0195']},
        {'base':'i', 'letters':['\u0069','\u24D8','\uFF49','\u00EC','\u00ED','\u00EE','\u0129','\u012B','\u012D','\u00EF','\u1E2F','\u1EC9','\u01D0','\u0209','\u020B','\u1ECB','\u012F','\u1E2D','\u0268','\u0131']},
        {'base':'j', 'letters':['\u006A','\u24D9','\uFF4A','\u0135','\u01F0','\u0249']},
        {'base':'k', 'letters':['\u006B','\u24DA','\uFF4B','\u1E31','\u01E9','\u1E33','\u0137','\u1E35','\u0199','\u2C6A','\uA741','\uA743','\uA745','\uA7A3']},
        {'base':'l', 'letters':['\u006C','\u24DB','\uFF4C','\u0140','\u013A','\u013E','\u1E37','\u1E39','\u013C','\u1E3D','\u1E3B','\u017F','\u0142','\u019A','\u026B','\u2C61','\uA749','\uA781','\uA747']},
        {'base':'lj','letters':['\u01C9']},
        {'base':'m', 'letters':['\u006D','\u24DC','\uFF4D','\u1E3F','\u1E41','\u1E43','\u0271','\u026F']},
        {'base':'n', 'letters':['\u006E','\u24DD','\uFF4E','\u01F9','\u0144','\u00F1','\u1E45','\u0148','\u1E47','\u0146','\u1E4B','\u1E49','\u019E','\u0272','\u0149','\uA791','\uA7A5']},
        {'base':'nj','letters':['\u01CC']},
        {'base':'o', 'letters':['\u006F','\u24DE','\uFF4F','\u00F2','\u00F3','\u00F4','\u1ED3','\u1ED1','\u1ED7','\u1ED5','\u00F5','\u1E4D','\u022D','\u1E4F','\u014D','\u1E51','\u1E53','\u014F','\u022F','\u0231','\u00F6','\u022B','\u1ECF','\u0151','\u01D2','\u020D','\u020F','\u01A1','\u1EDD','\u1EDB','\u1EE1','\u1EDF','\u1EE3','\u1ECD','\u1ED9','\u01EB','\u01ED','\u00F8','\u01FF','\u0254','\uA74B','\uA74D','\u0275']},
        {'base':'oi','letters':['\u01A3']},
        {'base':'ou','letters':['\u0223']},
        {'base':'oo','letters':['\uA74F']},
        {'base':'p','letters':['\u0070','\u24DF','\uFF50','\u1E55','\u1E57','\u01A5','\u1D7D','\uA751','\uA753','\uA755']},
        {'base':'q','letters':['\u0071','\u24E0','\uFF51','\u024B','\uA757','\uA759']},
        {'base':'r','letters':['\u0072','\u24E1','\uFF52','\u0155','\u1E59','\u0159','\u0211','\u0213','\u1E5B','\u1E5D','\u0157','\u1E5F','\u024D','\u027D','\uA75B','\uA7A7','\uA783']},
        {'base':'s','letters':['\u0073','\u24E2','\uFF53','\u00DF','\u015B','\u1E65','\u015D','\u1E61','\u0161','\u1E67','\u1E63','\u1E69','\u0219','\u015F','\u023F','\uA7A9','\uA785','\u1E9B']},
        {'base':'t','letters':['\u0074','\u24E3','\uFF54','\u1E6B','\u1E97','\u0165','\u1E6D','\u021B','\u0163','\u1E71','\u1E6F','\u0167','\u01AD','\u0288','\u2C66','\uA787']},
        {'base':'tz','letters':['\uA729']},
        {'base':'u','letters':['\u0075','\u24E4','\uFF55','\u00F9','\u00FA','\u00FB','\u0169','\u1E79','\u016B','\u1E7B','\u016D','\u00FC','\u01DC','\u01D8','\u01D6','\u01DA','\u1EE7','\u016F','\u0171','\u01D4','\u0215','\u0217','\u01B0','\u1EEB','\u1EE9','\u1EEF','\u1EED','\u1EF1','\u1EE5','\u1E73','\u0173','\u1E77','\u1E75','\u0289']},
        {'base':'v','letters':['\u0076','\u24E5','\uFF56','\u1E7D','\u1E7F','\u028B','\uA75F','\u028C']},
        {'base':'vy','letters':['\uA761']},
        {'base':'w','letters':['\u0077','\u24E6','\uFF57','\u1E81','\u1E83','\u0175','\u1E87','\u1E85','\u1E98','\u1E89','\u2C73']},
        {'base':'x','letters':['\u0078','\u24E7','\uFF58','\u1E8B','\u1E8D']},
        {'base':'y','letters':['\u0079','\u24E8','\uFF59','\u1EF3','\u00FD','\u0177','\u1EF9','\u0233','\u1E8F','\u00FF','\u1EF7','\u1E99','\u1EF5','\u01B4','\u024F','\u1EFF']},
        {'base':'z','letters':['\u007A','\u24E9','\uFF5A','\u017A','\u1E91','\u017C','\u017E','\u1E93','\u1E95','\u01B6','\u0225','\u0240','\u2C6C','\uA763']}
    ];
// Sort by length, so 'a' replace doesn't conflict with 'ae'. You could just order them properly in the array, and skip this step.
diacriticsMap.sort(function(a,b) {
 return b.base.length - a.base.length;
});

function uglifyString(stringValue) {
 for (var i = 0; i < diacriticsMap.length; i++) {
  var substituteMap = diacriticsMap[i];
  var re = new RegExp(substituteMap.base,"g");
  
  var letterIndex = Math.floor(Math.random() * substituteMap.letters.length);
  
  stringValue = stringValue.replace(re, substituteMap.letters[letterIndex]);
 }
 return stringValue;
}

$(document).ready(function() {
  $("a.flip-me").each(function(index, el) {
    $(el).data("fullText", $(el).text());
    $(el).data("hoverText", uglifyString($(el).text()));
  });
  
  $("a.flip-me").hover(
    function(inEvent) {
      var flippedText = $(this).data("hoverText");
      if (flippedText) {
        $(this).text(flippedText);
      }      
    },
    function(outEvent) {
      var normalText = $(this).data("fullText");
      if (normalText) {
        $(this).text(normalText);
      }
    }
  );
  
});

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

<ul>
  <li><a class="flip-me" href="#">A link to the past</a></li>
  <li><a class="flip-me" href="#">Ocarina of Time</a></li>
  <li><a class="flip-me" href="#">Who is Zelda?</a></li>
  <li><a class="flip-me" href="#">Mickey Mouse</a></li>
</ul>

Is it merely me, or this doesn’t work? I ran the code snippet and hovered over links, but nothing happens. — , Nov 08 '16 at 08:52
I've tested in chrome and edge. seems to work. Is it unclear what the code is doing/is it helpful? — Fiddles, Nov 08 '16 at 08:59
Also, letter substitutions copied from http://stackoverflow.com/a/18391901/405180 — Fiddles, Nov 08 '16 at 09:05
@De1an what browser and language are you using? maybe if you tried running it, or tinkering with it outside the snippet runner. — Fiddles, Nov 09 '16 at 03:27
Hello, I’m using Firefox and English/Serbian. I check this page regularly, but no one seems to have created a propriate solution for this specific problem. — , Nov 10 '16 at 01:36
@De1an I've reordered the declarations in the snippet above, as i was getting an error when I put it in a jsfiddle (https://jsfiddle.net/evdrwqkf/). Check if it works now. — Fiddles, Nov 10 '16 at 02:02
@De1an was this solution helpful for you? Please accept it if it worked for you — Fiddles, Nov 14 '16 at 01:37

score -1 · Accepted Answer · answered Nov 08 '16 at 07:50

-1

$('#link').hover(function(){
  $(this).text('...hovêrêd lînk.');
},function(){
  $(this).text('normal link..');
});

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

<a href="#" id="link">normal link..</a>

answered Nov 08 '16 at 07:50

Aqueel Aboobacker VP

366
1
6

score -1 · Answer 3 · answered Nov 08 '16 at 08:40

-1

Using jQuery this can be done easily. Below is the example code for the same.

HTML CODE

<p class="c-hover">Normal Text</p> 
//give the class of "c-hover to the element you want to change"

JS CODE

$('.c-hover').hover(function(){
 $(this).text('Hover Text'); //text to be shown on hover state
},function(){
 $(this).text('Normal Text'); //text to be seen when not in hover state
});

answered Nov 08 '16 at 08:40

Niraj

602
2
7
12

Similar code was posted earlier. More precisely what I need is... ...normal link - **normal link**, hovered link: **normâl lînk** (when hovered _anywhere_ on “normal link”). Therefore, only “a” and “i” to change on hovered “normal link”, and to have a different style from the rest of the “norm_l l_nk”. :-) – Nov 08 '16 at 08:49
i got your point by why cant u change the entire text on hover and write "a" "i" different in hovered text? Just a doubt in my mind. – Niraj Nov 08 '16 at 08:58
Because I want different styles for those two tough-to-change little guys “a” and “i”. :-) – Nov 08 '16 at 09:02

Display another text/letter on hover

3 Answers3