在鼠标悬停时重新排列文本/字母

Question

I'd like for some text on my page to have the letters rearranged when a user hovers over it. For example, mouseover "WORK," and it becomes "OWKR." I suspect js is needed, but I'm still pretty new to js. Below is my html:

<div class="header">
<div id="access" role="navigation">
<ul id="nav">
    <li id="work"><a href="work.html" title="Portfolio">WORK</a></li>
    <li id="studio"><a href="studio.html" title="About Us">STUDIO</a></li>
    <li id="contact"><a href="mailto:someone">CONTACT</a></li>
    <li id="news"><a href="news.html" title="Goings Ons">NEWS</a></li>
</ul>
</div>
</div>

I found a post that helped at Combining .hover() and .replaceWith() and expanded that code for my list. However, I have a feeling my js is not as clean as it could be and the other issue I'm having is that on mouseover, the text is no longer a link. Here's my js:

$(document).ready(function() {   
   $("#work").hover(
      function () {
        $('#work').text('KROW');
      },
      function () {
        $('#work').text('WORK');
      }
    );
    $("#studio").hover(
      function () {
        $('#studio').text('DUTIOS');
      },
      function () {
        $('#studio').text('STUDIO');
      }
    );
    $("#contact").hover(
      function () {
        $('#contact').text('ANOTTCC');
      },
      function () {
        $('#contact').text('CONTACT');
      }
    );
    $("#news").hover(
      function () {
        $('#news').text('ENSW');
      },
      function () {
        $('#news').text('NEWS');
      }
    );
});

I know it's probably not great, but this was the only way I could get it to rearrange like I wanted.

Here's the jsfiddle

Thanks for any help!

Answer 1

You can simple use the css property content to provide the same effect. It is easy to use.

content:"YOUR TEXT"

Here is my jsfiddle

Check it and let me know if there any problem.

Answer 2

Here is one more way, You can associate data to all the anchor links and toggle the text on mouseover and mouseout event.

Here is the live demo .

You can just add one common class (eg "jumble-up-text") to these anchor links and bind "mouseover", "mouseout" event on it.

HTML :

<li><a class="jumble-up-text" href="work.html" title="Portfolio" data-changetxt="KROW">WORK</a></li>

Javascript :

$("a.jumble-up-text").on("mouseover mouseout", function(){
    var $this = $(this);
    var sShowTxt = $this.data('changetxt');
    $this.data('changetxt', $this.text());   
    $this.text(sShowTxt);

});

This code will overwrite the anchor tag text on mouseover and set it back to its original value on mouseout event.

You can re-use the same code for other anchor links, you just have to attach same class and set the "data-changetxt" attribute value to the the text you want to display on mousehover.