I'm looking to add a fun interactive element to my webpage where the letters in certain text rearrange when a user hovers over it. For instance, hovering over "WORK" would display "OWKR" instead. I have a feeling that some JavaScript is needed for this effect, but I'm still relatively new to using JS. Below you'll find the HTML code snippet:
<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 came across a helpful post on Stack Overflow about combining hover effects and replacing text content, which guided me in expanding my own code for the list. However, I believe there may be room for improvement in the cleanliness of my JavaScript code. Additionally, I encountered an issue where the text loses its link attribute on mouseover. Here's the JS code snippet:
$(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');
}
);
});
While I acknowledge that my approach might not be perfect, it was the only way I could achieve the desired rearrangement effect.
Feel free to check out the jsfiddle here.
Any guidance or assistance would be greatly appreciated!