a : 링크 색상을 jQuery로 변경했습니다. 이제는 내 호버가 작동하지 않습니다.

Question

네비게이션의 색상이 특정 사진에 대해 읽기 어려웠으므로 특정 한 페이지에 대해 변경해야합니다. 다음은 HTML입니다 : 코드의 엄청난 양에 대한

switch (i) 
         { 
          case 0: 
          $('.content').fadeOut(500); 
          $('a.navItem:link').animate({color: "#333"}); 
          $('#navBiog a.navItem:hover,a:active', 
           '#navConductor a.navItem:hover,a:active', 
           '#navOrchestrator a.navItem:hover,a:active', 
           '#navGallery a.navItem:hover,a:active', 
           '#navContact a.navItem:hover,a:active').css({'color': ''}); 

          break; 

          case 1: 
          $('.content').slideUp(700); 
          $('#biogContent').slideDown(700, function(){ 
           $('h1').animate({color: "#cc0099"}); 
           $('a.navItem:link').animate({color: "#333"}); 
           $('#navBiog a.navItem:hover,a:active', 
            '#navConductor a.navItem:hover,a:active', 
            '#navOrchestrator a.navItem:hover,a:active', 
            '#navGallery a.navItem:hover,a:active', 
            '#navContact a.navItem:hover,a:active').css({'color': ''}); 

          }); 
          break; 

          case 2: 
          $('.content').slideUp(700); 
          $('#condContent').slideDown(700, function(){ 
           $('h1').animate({color: "#ff9900"}); 
           $('a.navItem:link').animate({color: "#333"}); 
           $('#navBiog a.navItem:hover,a:active', 
            '#navConductor a.navItem:hover,a:active', 
            '#navOrchestrator a.navItem:hover,a:active', 
            '#navGallery a.navItem:hover,a:active', 
            '#navContact a.navItem:hover,a:active').css({'color': ''}); 
          }); 
          break; 

          case 3: 
          $('.content').slideUp(700); 
          $('#orchContent').slideDown(700, function(){ 
           $('h1').animate({color: "#66cc66"}); 
           $('a.navItem:link').animate({color: "#ffffff"}); 
           $('#navBiog a.navItem:hover,a:active', 
            '#navConductor a.navItem:hover,a:active', 
            '#navOrchestrator a.navItem:hover,a:active', 
            '#navGallery a.navItem:hover,a:active', 
            '#navContact a.navItem:hover,a:active').css({'color': ''}); 
          }); 
          break; 

          case 4: 
          $('.content').slideUp(700); 
          $('#mediaContent').slideDown(700, function(){ 
           $('h1').animate({color: "#6699ff"}); 
           $('a.navItem:link').animate({color: "#333"}); 
           $('#navBiog a.navItem:hover,a:active', 
            '#navConductor a.navItem:hover,a:active', 
            '#navOrchestrator a.navItem:hover,a:active', 
            '#navGallery a.navItem:hover,a:active', 
            '#navContact a.navItem:hover,a:active').css({'color': ''}); 
          }); 
          break; 

          case 5: 
          $('.content').slideUp(700); 
          $('#contactContent').slideDown(700, function(){ 
           $('h1').animate({color: "#ff0"}); 
           $('a.navItem:link').animate({color: "#333"}); 
           $('#navBiog a.navItem:hover,a:active', 
            '#navConductor a.navItem:hover,a:active', 
            '#navOrchestrator a.navItem:hover,a:active', 
            '#navGallery a.navItem:hover,a:active', 
            '#navContact a.navItem:hover,a:active').css({'color': ''}); 
          }); 
          break; 

          default: 
          break; 
         } 

죄송합니다

<div id='nav'> 
     <ul> 
       <li id='navBiog'><a href="javascript:void(0)" onclick="imageChange(1, 400)" class="navItem">biography</a></li> 
       <li id='navConductor'><a href="javascript:void(0)" onclick="imageChange(2, 400)" class="navItem">conductor</a></li> 
       <li id='navOrchestrator'><a href="javascript:void(0)" onclick="imageChange(3, 400)" class="navItem">orchestrator</a></li> 
       <li id='navGallery'><a href="javascript:void(0)" onclick="imageChange(4, 400)" class="navItem">gallery</a></li> 
       <li id='navContact'><a href="javascript:void(0)" onclick="imageChange(5, 400)" class="navItem">contact</a></li>      
     </ul>  
    </div> 

CSS

a.navItem:link,a.navItem:visited{ 
    font-family:"Helvetica", "Arial", sans-serif; 
    font-size:20px; 
    text-align:right; 
    padding:4px 6px 4px 6px; 
    text-decoration:none; 
    color:#333; 
    transition:color 1s; 
    -moz-transition:color 1s; /* Firefox 4 */ 
    -webkit-transition:color 1s; /* Safari and Chrome */ 
    -o-transition:color 1s; /* Opera */ 
    } 
    #navBiog a.navItem:hover,a:active {color:#cc0099;} 
    #navConductor a.navItem:hover,a:active {color:#ff9900;} 
    #navOrchestrator a.navItem:hover,a:active {color:#66cc66;} 
    #navGallery a.navItem:hover,a.navItem:active {color:#6699ff;} 
    #navContact a.navItem:hover,a.navItem:active {color:#FF0;} 

그리고 jQuery를, 그러나 그것은 말로 상당히 어렵다. 어쨌든 초기 색상 변경은 작동하지만 호버는 작동하지 않습니다. nav의 각 링크가 마우스로 가리키면 다른 색상으로 표시된다는 사실은 분명히 복잡합니다 ...

감사합니다. 진심으로 사과드립니다. 이것은 어리석은 어리석은 질문이다/천 번 질문하고 나는 그것을 발견 할 수 없었다.

Answer 1

< - UPDATE 혀를 포함 - 다음>

은 단순히 각 부분이 그렇게이 "학습"할 수 있습니다 참조 다른 사람들이 무엇인지 작동 방법에 대한 주석이있는 fiddle의 코드입니다 실제로 진행됩니다.

$(function() { 
    // Your array of colors to use as "hover over" color of each link 
    // keep in mind, for this to work properly, the number of colors should match the number of links & 
    // their index's should match respectivly (exp. link # 1 will = array[0] as it is the first item in the array) 
    var araCss = new Array("#cc0099", "#ff9900", "#66cc66", "#6699ff", "#FF0"); 
    // Also remember there are several different ways to do this, 
    // for instance you could simply create an attribute in the link named "hoverColor" & 
    // have it equal the link color you want, like: <li hoverColor="#cc0099">... 
    // after that, on the hoverin you could easily get your hover color from $(this).attr("hoverColor") 

    // The following will begin cycling through each list item in the list in order to add the functionality you want 
    $("li").each(function(i) { 
     // Here we first add the hoverin/hoverout functions to be called 
     $(this).hover(function(eIn) { 
      // For hover in, animate this element to the color desired for this li 
      $(this).children("a").animate({ color: araCss[i] }); 
     }, 
     function(eOut) { 
      // for hover out, animate this li to the base color desired 
      $(this).children("a").animate({ color: "#333" }); 
     }) // do not place ; as it will end the line for $(this) and we simply want to continue on 
     // Here we make the call to the link inside each li, as you can see, 
     // jQuery makes it very easy to go from element to the next without need of a recall, 
     // since .hover returns the element is was placed on 
     .children("a").click(function(eClk) 
     { 
      // Do some work when clicking on link! // The following will make the link Blink 
      setTimeout(function() { $(this).fadeOut("2000", function(){ $(this).fadeIn("2000") }); }, 10); 
      switch(i) // 0 based off of var i from .each function, thus you can manipulate your content with different link clicks here 
      { 
       case 0: // biography 
        // content fade out 
        break; 
       case 1: // conductor 
        // content slide up 
        break; 
       case 2: // orchestrator 
        // content slide down 
        $(this).addClass('color-white').mouseleave(function() { $(this).removeClass("color-white") }); 
        break; 
       case 3: // gallery 
        // content slide up 
        break; 
       case 4: // contact 
        // content slide down 
        break; 
      } 
     }); 
    }); 
}); 

< - UPDATE - 빨리 답변을 의미 긴 주말, 미안해>

. 개인적인 삶은 제쳐두고, 나는 당신이하려고하는 것을 단순화하는 방법의 주요한 예를 들고 당신에게 빠른 바이올린을 만들었습니다. jQuery와 같은 라이브러리를 사용할 때, 당신이 원하는 것을 할 수 있도록 열심히 일하지 않도록주의하십시오. lib를 쓰는 것을 도운 사람은 이미 모든 노력을 다 했으므로 함께 묶는 것뿐입니다.

내 피들을 사용해보십시오. 내 뜻을 알 수있을 것 같습니다. 당신이 볼 수 있듯이

http://jsfiddle.net/SpYk3/WXYHb/

, 코드의 모든 형태는 훨씬 더 laxed하고 사고없이 및 jQuery를 크로스 브라우저 지원, 코드의 동일한 목적을 미리 형성. 즐겨!

< - 올빼미 -> 약간의 충고. 거대한 자바 스크립트 코드를 만들어 개별 부품을 변경하는 대신 css 클래스를 작성하여 jQuery, JQueryUI 및 Css 스타일링을보다 효과적으로 활용하십시오. 즉, jQuery가 이미 수행 한 모든 노력을 중단하십시오. 몇 가지 요소에 특정 CSS를 사용하려면 해당 특정 CSS를 과 같은 클래스에 씁니다.메이크업 나 블랙 {색상 : # 000} :

뜻에서 그런 단지 addClass, 또는 toggleClass, 또는 switchClass은 다음 링크를 확인 자세한 내용은 수요

에 그 요소의 색상을 변경하려면

는 http://jqueryui.com/docs/switchClass/

(2 개 클래스 간의 토글)

http://api.jquery.com/toggleClass/은 (a jQuery를 객체 클래스 추가) http://api.jquery.com/addClass/

,536 (2 개 클래스의 토글 링을 애니메이트 할 수)

이 반드시 직접 질문에 대답하지 않습니다 http://api.jquery.com/removeClass/

(JQuery와 객체에서 클래스를 제거) (즉, 직접적인 예를 들자면), 나는 갈 회의가있다. 내가 돌아 왔을 때 코드의 줄을 줄이고 훨씬 더 유용성과 접근성을 가지고 어떻게하려고하는지 예를 들어 보겠다.