Adding an image to a:hover

For the last half hour I’ve been working on adding little stars to the hover on my menu links (About/Portfolio/CV/Contact). It’s now working in Firefox. Here’s how I’ve done it.

Created the star in Photoshop (very simply brush use!). Uploaded the star to Media file in WP.

Used the following CSS code:

li#menu-item-26 a:hover {
color: #a3030f;
background: url(http://www.ellenpickett.com/wp-content/uploads/2011/07/star-test-1.png) no-repeat 0 0;
}

(This being for menu-item-26 i.e. “About.”)

NB [Sept 2011] – this was a post written for my old site design.

 

Leave a Reply

Your email address will not be published. Required fields are marked *