Question

我希望在我的页面上有一些文字可以在用户将鼠标悬停在其上时重新排列。例如，鼠标悬停“工作”，它变为“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来提供相同的效果。它易于使用。

content:"YOUR TEXT"

Here is my jsfiddle

检查并告诉我是否有任何问题。

Answer 2

这是另一种方法，您可以将数据关联到所有锚链接，并在mouseover和mouseout事件上切换文本。

这是live demo。

你可以在这些锚链接中添加一个公共类（例如＆＃34; jumble-up-text＆＃34;）并绑定＆＃34; mouseover＆＃34;，＆＃34; mouseout＆＃34;就此而言。

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);

});

此代码将覆盖鼠标悬停上的锚标记文本，并将其设置回 mouseout 事件的原始值。

您可以为其他锚链接重复使用相同的代码，您只需附加相同的类并设置＆＃34; data-changetxt＆＃34;属性值指向要在鼠标悬停时显示的文本。

重新排列鼠标悬停上的文字/字母

2 个答案: