Grow your CSS skills. Land your dream job.

JQuery link hovering fading colour change

  • # October 10, 2009 at 5:37 pm

    Hiya.

    I’ve got basically no experience with JQuery and I’m wondering how I could get, on hover, the colour of a link to fade to another.
    Any recommended articles or code samples would be great, thanks all :3

    # October 11, 2009 at 5:09 pm

    http://davidwalsh.name/fading-links-jqu … adinglinks

    # October 11, 2009 at 8:42 pm

    Thanks. After a heck of a lot of fiddling I got it to work somewhat, but I’m wondering how to apply the fade class to all links in an unordered list.

    This only makes the default bullets constantly fade, I’m not sure what to do :0

    # October 12, 2009 at 1:49 am

    The cool thing (for me at least) about Jquery is how similar to CSS it is (esp the use of selectors).

    Here’s the example code from the above link:

    Code:
    $(document).ready(function() {
    $(‘.fade’).dwFadingLinks({
    color: ‘#008000′,
    duration: 700
    });
    });

    This part: $(‘.fade’). selects all elemets with the class="fade" using the basic CSS class selector.

    If you change this to: $(‘.fade a’). it will select all <a> inside an element #listID (again, just like CSS). Here’s the code:

    Code:
    $(document).ready(function() {
    $(‘.fade a’).dwFadingLinks({
    color: ‘#008000′,
    duration: 700
    });
    });

    I haven’t tested this, but I’m 90% sure it works. ;) I’m still on the Jquery learning curve.

    Hope that helps.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".