I updated the color of my a:link using jQuery, but now my a:hover is not functioning as expected

Question

I updated the color of my a:link using jQuery, but now my a:hover is not functioning as expected

Due to the readability issues of the navigation color against a specific image, I am looking to modify it for a particular page. Below is the HTML code:

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

Additionally, jQuery code has been used:

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:
                            ...
                            [Code continues with additional cases]
                            ...
                            default:
                            break;
                        }

I appreciate your assistance in advance and apologize if this question seems overly complex or redundant.

jquery css pseudo-class

Answer 1

Answer №1

<-- UPDATE TUT INCLUDE -->

Here is a breakdown of the code taken from a fiddle, with detailed comments explaining each step for educational purposes.

$(function() {
    var araCss = new Array( "#cc0099", "#ff9900", "#66cc66", "#6699ff", "#FF0" );
    
    $("li").each(function(i) {
        $(this).hover(function(eIn) {
            $(this).children("a").animate({ color: araCss[i] });
        },
        function(eOut) {
            $(this).children("a").animate({ color: "#333" });
        })
        .children("a").click(function(eClk)
        {
            setTimeout(function() { $(this).fadeOut("2000", function(){ $(this).fadeIn("2000") }); }, 10);
            switch(i)
            {
                case 0:
                    // content fade out
                    break;
                case 1:
                    // content slide up
                    break;
                case 2:
                    // content slide down
                    $(this).addClass('color-white').mouseleave(function() { $(this).removeClass("color-white") });
                    break;
                case 3:
                    // content slide up
                    break;
                case 4:
                    // content slide down
                    break;
            }
        });
    });
});

<-- UPDATE -->

Apologies for the delayed response. Check out the mentioned fiddle for a simplified approach to achieve the same results using jQuery more efficiently and effectively.

Experience the ease of implementation and cross-browser support in the provided fiddle link:

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

Utilize the power of CSS classes in conjunction with jQuery to streamline your coding process and enhance functionality without unnecessary complexity.

<-- OLD --> Instead of complex JavaScript, leverage the capabilities of jQuery, JQueryUI, and CSS by utilizing targeted classes for styling elements. Simplify your approach and make use of the tools available within jQuery's framework.

Refer to the following resources for further information:

(animate toggling between classes) http://jqueryui.com/docs/switchClass/
(toggle between classes) http://api.jquery.com/toggleClass/
(add a class to a jQuery object) http://api.jquery.com/addClass/
(remove a class from a jQuery object) http://api.jquery.com/removeClass/

I will provide a much simpler example on jsfiddle after my meeting, demonstrating how to achieve your goal with fewer lines of code and improved usability.

Answer 2

<-- UPDATE TUT INCLUDE -->

Here is a breakdown of the code taken from a fiddle, with detailed comments explaining each step for educational purposes.

$(function() {
    var araCss = new Array( "#cc0099", "#ff9900", "#66cc66", "#6699ff", "#FF0" );
    
    $("li").each(function(i) {
        $(this).hover(function(eIn) {
            $(this).children("a").animate({ color: araCss[i] });
        },
        function(eOut) {
            $(this).children("a").animate({ color: "#333" });
        })
        .children("a").click(function(eClk)
        {
            setTimeout(function() { $(this).fadeOut("2000", function(){ $(this).fadeIn("2000") }); }, 10);
            switch(i)
            {
                case 0:
                    // content fade out
                    break;
                case 1:
                    // content slide up
                    break;
                case 2:
                    // content slide down
                    $(this).addClass('color-white').mouseleave(function() { $(this).removeClass("color-white") });
                    break;
                case 3:
                    // content slide up
                    break;
                case 4:
                    // content slide down
                    break;
            }
        });
    });
});

<-- UPDATE -->

Apologies for the delayed response. Check out the mentioned fiddle for a simplified approach to achieve the same results using jQuery more efficiently and effectively.

Experience the ease of implementation and cross-browser support in the provided fiddle link:

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

Utilize the power of CSS classes in conjunction with jQuery to streamline your coding process and enhance functionality without unnecessary complexity.

<-- OLD --> Instead of complex JavaScript, leverage the capabilities of jQuery, JQueryUI, and CSS by utilizing targeted classes for styling elements. Simplify your approach and make use of the tools available within jQuery's framework.

Refer to the following resources for further information:

(animate toggling between classes) http://jqueryui.com/docs/switchClass/
(toggle between classes) http://api.jquery.com/toggleClass/
(add a class to a jQuery object) http://api.jquery.com/addClass/
(remove a class from a jQuery object) http://api.jquery.com/removeClass/

I will provide a much simpler example on jsfiddle after my meeting, demonstrating how to achieve your goal with fewer lines of code and improved usability.

I updated the color of my a:link using jQuery, but now my a:hover is not functioning as expected

Answer №1

Similar questions

The container's height is determined by the CSS top position of the last child element within the container, with a

Creating two separate divs that can scroll independently while also limiting each other's scroll depth can be achieved by utilizing

JQuery not being recognized by MVC4 view

Ensuring all ajax calls have completed before proceeding using selenium webdriverjs

Unable to send HTML content back from the controller when making Ajax requests in a messaging application

Spacing between hidden checkboxes and their labels

Issue with Bootstrap 4 column width when using Angular 2 *ngFor

Refreshing the Dropdown Menu with Jquery

Getting an array of all visible text on a page using the same locator in Selenium

Having various ng-apps within a single parent app

Adjust parent div size automatically when child is resized - jQuery Resizable Plugin

Experiencing challenges in integrating fundamental Javascript elements on a chat page

Retrieving subscriber count from Feedburner using jQuery and JSON

The Animation effect of jQuery Making an Element Move Down

Mobile devices not displaying background images correctly

The spread operator seems to be malfunctioning whenever I incorporate tailwindcss into my code

Challenge with maintaining tab view data in Openui5

Adding up results from Ajax request based on specific criteria

Creating a container that scrolls horizontally

Utilizing MVC4 and jQuery: Seamlessly navigating to a different view with the click of a button, while simultaneously transmitting a parameter object to the destination