Я изменил цвет ссылки a: с помощью jQuery.Теперь мой a: hover не работает

Question

Поскольку цвет навигации был неразборчивым на определенной картинке, я хочу, чтобы он изменился для одной конкретной страницы.Вот HTML-код:

    <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

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;
                        }

Извините за огромное количество кода, но его довольно сложно вставить вслова.В любом случае первоначальное изменение цвета работает, но зависания - нет, очевидно, это усложняется тем фактом, что каждая ссылка в навигационной панели имеет другой цвет при наведении ...

Большое спасибо заранее и искреннеизвиняюсь, если это непристойно глупый вопрос / задавался тысячу раз, а я просто не смог его найти.

Answer 1

<- ОБНОВЛЕНИЕ, ТО ВКЛЮЧЕНО ->

Ниже приведен просто код из скрипки с подробными комментариями о том, как работает каждая пьеса, чтобы другие, кто видит это, могли «узнать», что на самом деле происходит.

$(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;
            }
        });
    });
});

<- ОБНОВЛЕНИЕ ->

Извините за длинные выходные, хотел ответить раньше. Если не считать личной жизни, я быстро научил вас тому, как упростить то, что вы пытаетесь сделать. Постарайтесь помнить, что при использовании такой библиотеки, как jQuery, не работайте так усердно, чтобы заставить вещи делать то, что вы хотите. Кто-то, кто помогал писать библиотеку, уже сделал всю тяжелую работу, все, что вам нужно сделать, это связать ее вместе.

Попробуйте мою скрипку, и я думаю, вы поймете, что я имею в виду.

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

Как вы увидите, все формы кода гораздо более слабые и выполняют те же задачи, что и ваш код, без происшествий и с поддержкой кросс-браузерной работы jQuery. Наслаждайтесь!

<- СТАРЫЙ -> Просто немного советов. Вместо того, чтобы создавать огромный код javascript для изменения отдельных частей, почему бы не лучше использовать стили JQuery, JQueryUI и Css, написав класс css. Другими словами, прекратите пытаться выполнить всю тяжелую работу, которую jQuery уже проделал. если вы хотите, чтобы несколько элементов имели определенный css, запишите этот конкретный css в такой класс: .make-me-black {color: # 000} Затем просто добавьте addClass, или toggleClass, или даже switchClass по своему желанию, чтобы изменить цвет этих элементов по требованию

Для получения дополнительной информации перейдите по следующим ссылкам:

• (позволяет анимировать переключение 2 классов) http://jqueryui.com/docs/switchClass/
• (переключение между 2 классами) http://api.jquery.com/toggleClass/
• (добавляет класс к объекту jQuery) http://api.jquery.com/addClass/
• (удаляет класс из объекта jQuery) http://api.jquery.com/removeClass/

Это не обязательно отвечает на вопрос напрямую (т. Е. Прямой пример), но у меня есть собрание, на которое можно пойти, когда я вернусь, я приведу пример того, как сделать то, что вы пытаетесь сделать, в ALOT меньше строк кода и с гораздо большим удобством использования и доступа