Skip to main content


This topic contains 1 reply, has 0 voices, and was last updated by  codemonkey 11 years, 1 month ago.

Viewing 1 post (of 1 total)
  • Author
  • #22703


    Hey folks,

    Sorry if this topic has already been covered, I did a brief look around before posting, and it’s too early in the morning for me. :D

    I am developing a website with your typical horizontal navigation bar. The menu consists of text links with sufficient padding, etc. Each anchor element has a different icon (that is a background image, not a standard image) left-aligned associated with the link. My menu structure is a unordered list wrapped in a div element. The div element has a subtle gradient background.

    Here’s what I would like to achieve, and I have absolutely no idea how to do it.

    When onMouseOver event is reached on the anchor, I want to fade in a different background image on the list-item, so I’m guessing I need a way to initially set the background image’s opacity to 0 on page load, and fade in the image via opacity.

    And I want to reverse the process onMouseOut.

    I’ve searched and searched and searched. I haven’t found anything that uses a background image, only fading colors. Colors aren’t an option for me, as the hover background image has a subtle gradient to it as well, it’s just brighter.

    I’ve been slamming my head into the table for a while now, so any help you could offer would be spectacular and greatly appreciated.

    I’m using the latest version of jQuery by the way.

    *EDIT* A good example is the jQuery UI website’s "launch pad" (near the footer).
    I’ve looked at the JS and CSS, and it looks like a beast :(

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star