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

Question

我希望当用户将鼠标悬停在页面上时，我的页面上的某些文本会重新排列字母。例如，将鼠标悬停在“WORK”上，它就会变成“OWKR”。我怀疑需要 js，但我对 js 还是很陌生。下面是我的 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>

我在 Combining .hover() and .replaceWith() 找到了一个有用的帖子并为我的列表扩展了该代码。但是，我觉得我的 js 并不像它应该的那样干净，我遇到的另一个问题是在鼠标悬停时，文本不再是链接。这是我的 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');
      }
    );
});

我知道这可能不太好，但这是我让它按照我想要的方式重新排列的唯一方法。

Here's the jsfiddle

感谢您的帮助!

Answer 1

您可以简单地使用 css 属性 content 来提供相同的效果。它易于使用。

内容:“您的文本”

Here is my jsfiddle

检查一下，如果有问题请告诉我。