CCS \ HTML - Spry 메뉴 하위 메뉴에서 마우스를 올리면 텍스트가 변경됩니다.

Question

spry 메뉴가 있으며 드롭 메뉴가 있습니다. 메뉴 단추 위로 마우스를 가져 가면 텍스트가 변경됩니다. 그러면 드롭 다운 메뉴가 열려 있고 텍스트가 1에서 one으로 변경되는 메뉴 항목 중 하나를 강조 표시하면됩니다. 이것이 가능한가. 다음과 같이 활발한 메뉴

내 코드는 다음 css에 대한

<ul id="MenuBar1" class="MenuBarHorizontal"> 
<li><a class="MenuBarItemSubmenu" href="#>1-5</a> 
    <ul> 
    <li><a href="#" data-lightbox="'>1</a></li> 
    <li><a href="#" data-lightbox="">2</a></li> 
    <li><a href="#" data-lightbox="">3</a></li> 
    <li><a href="#" data-lightbox="">4</a></li> 
    <li><a href="#" data-lightbox="">5</a></li> 
</ul> 

내 코드 here 그리고 당신은 메뉴가 here 모습을 볼 수 있습니다.

제 질문을 요약 해 드리겠습니다. 하위 메뉴 항목 중 하나를 강조 표시 할 때 내 spry 메뉴 하위 메뉴의 텍스트를 변경하려면 어떻게해야합니까?

나는이 문제에 관해서이 사이트에 대한 연구를 행운으로했다. 또한 어도비의 4ms와 spry 메뉴에 대한 문서를 살펴 보았습니다. Google에서도 마찬가지입니다.

누군가이 질문에 대해 통찰력을 공유 할 수 있다면 좋을 것입니다.

업데이트

나는 jQuery를하고 mouseover하지만이 23 개 가지 서브 메뉴 또는 유일한 방법이다 모든 것을 입력 할 수 통증이있을 것로 텍스트를 변경하는 방법에 대한 기사를 발견?

Answer 1

HTML의 일종의 특성에 롤오버 텍스트를 넣으십시오.

<ul id="MenuBar1" class="MenuBarHorizontal"> 
    <li> 
    <a class="MenuBarItemSubmenu" href="#" title="one-five">1-5</a> 
    <ul> 
     <li><a href="#" data-lightbox="" title="one">1</a></li> 
     <li><a href="#" data-lightbox="" title="two">2</a></li> 
     <li><a href="#" data-lightbox="" title="three">3</a></li> 
     <li><a href="#" data-lightbox="" title="four">4</a></li> 
     <li><a href="#" data-lightbox="" title="five">5</a></li> 
    </ul> 
    </li> 
</ul> 

그리고 jQuery를의 작은 비트 :

<script src="ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
<script> 
$(function() { 
    $('#MenuBar1').on('mouseover', 'a', function() { 
     var $this = $(this); 
     $this.attr('data-default-text', $this.text()).text($this.attr('title')); 
    }).on('mouseout', 'a', function() { 
     var $this = $(this); 
     $this.text($this.attr('data-default-text')); 
    }); 
}); 
</script> 

는 위의 코드와 함께 작동하는지 보여주기 위해 바이올린을 추가 :

http://jsfiddle.net/ryanwheale/p6Zwa/

이 어쨌든 아주 좋은 방법입니다

Answer 2

<ul id="submenu"> 
    <li><a href="#" data-lightbox="one" default-text="1">1</a></li> 
    <li><a href="#" data-lightbox="two" default-text="2">2</a></li> 
    <li><a href="#" data-lightbox="three" default-text="3">3</a></li> 
    <li><a href="#" data-lightbox="four" default-text="4">4</a></li> 
    <li><a href="#" data-lightbox="five" default-text="5">5</a></li> 
</ul> 

당신은 jQuery로 시도 할 수 있습니다 :

먼저 JQuery와 라이브러리를 포함

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 

가 더 많은 시험이 필요하거나 유연성을 attributes에 초기 값과 결과 값을 저장을

$("#submenu a").hover(function(){ 
    if($(this).html() != $this.attr('data-lightbox')) 
    $(this).html($this.attr('data-lightbox')); 
    else 
    $(this).html($this.attr('default-text')); 

}); 

});

Answer 3

나는 이것을 수행하기 위해 : after 의사를 사용할 수 있다고 생각합니다.

#menuBar1 li a { 
    position:relative; 
    display:block; 
    width:100px; 
    height:30px; 
} 
#menuBar1 li a:after { 
    color:white; 
    content:'1'; 
    position:absolute; 
    width:100px; 
    line-height:30px; 
    text-align:center; 
} 
#menuBar1 li a:hover:after { 
    content:'one'; 
} 

JSFiddle :이 방법으로 당신은 모든 수의 클래스 또는 뭔가를해야하기 때문에 if 문 자바 스크립트를 사용하면 배열과를 사용할 수 있지만 http://jsfiddle.net/96jFZ/

지금이, 자바 스크립트와 쉬울 수 있습니다 그것을 바꿀 수 있습니다.