마우스 오버시 문자/문자 재정렬

Question

사용자가 마우스를 가리키면 문자가 재 배열되도록 내 페이지의 일부 텍스트를 원합니다. 예를 들어 mouseover "WORK"는 "OWKR"이됩니다. 나는 js가 필요하다고 생각하지만 나는 아직 꽤 js에 익숙하지 않다.

<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()에 도움이 내 목록은 그 코드를 확장 게시물을 발견 : 다음은 내 HTML입니다. 그러나, 나는 내 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'); 
     } 
    ); 
}); 

나는 아마 잘되지 알고 있지만, 내가 원하는 것처럼 다시 정렬 얻을 수있는 유일한 방법이었다 : 여기 내 JS를합니다. 어떤 도움

Here's the jsfiddle

감사합니다!

Answer 1

또 다른 방법입니다. 모든 앵커 링크에 데이터를 연결하고 mouseover 및 mouseout 이벤트에서 텍스트를 전환 할 수 있습니다.

여기는 live demo입니다.

이러한 앵커 링크에 하나의 공통 클래스 (예 : "jumble-up-text")를 추가하고 "mouseover", "mouseout"이벤트를 바인딩 할 수 있습니다.

HTML :

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

자바 스크립트 :

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

}); 

마우스 오버에 앵커 태그의 텍스트를 덮어 로 마우스를 이벤트를 다시 원래 값으로 설정됩니다이 코드.

다른 앵커 링크에 동일한 코드를 다시 사용할 수 있습니다. 동일한 클래스를 연결하고 mousehover에서 표시 할 텍스트에 "data-changetxt"속성 값을 설정하기 만하면됩니다.

Answer 2

CSS 속성 content을 사용하면 동일한 효과를 얻을 수 있습니다. 사용하기 쉽습니다.

content:"YOUR TEXT"

Here is my jsfiddle

그것을 확인하고 나에게 어떤 문제가 있으면 알려 주시기 바랍니다.