Get a free trial // Grow your CSS skills // Land your dream job

Fading Hover Rollover

  • # January 22, 2010 at 11:47 am

    Just implemented this code into my site:

    I was wondering if anyone could tell me where the timing for the background color of the hover is? I can change the milliseconds of the actual TEXT changing (in the main.js file) , but this doesn’t seem to affect the background color timing. I just want the entire transition to be faster.


    # January 22, 2010 at 8:58 pm

    I have highlighted the background fading speeds in Red. Remember, when switching from a text speed (i.e ‘slow’ or ‘fast’) to milliseconds, you no longer use quotation marks.

    var hoverColour = "#FFF";
    //when the dom has loaded
    //display the hover div
    $("div.hoverBtn").show("fast", function() {
    //append the background div
    //on link hover
    //store initial link colour
    if ($(this).attr("rel") == "") {
    $(this).attr("rel", $(this).css("color"));
    //fade in the background
    .css({"display": "none", "opacity": "1"})
    //fade the colour
    $(this) .stop()
    .css({"color": $(this).attr("rel")})
    .animate({"color": hoverColour}, 350);
    //fade out the background
    //fade the colour
    $(this) .stop()
    .animate({"color": $(this).attr("rel")}, 250);

    Also, sorry for having not having it in code, I can’t change the text color with the code tag on it as well. They should fix that.

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed