我希望当用户将鼠标悬停在页面上时,我的页面上的某些文本会重新排列字母。例如,将鼠标悬停在“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');
}
);
});
我知道这可能不太好,但这是我让它按照我想要的方式重新排列的唯一方法。
感谢您的帮助!
最佳答案
关于javascript - 在鼠标悬停时重新排列文本/字母,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25841443/