By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,627 Members | 1,870 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,627 IT Pros & Developers. It's quick & easy.

mouseOver effect using CSS

P: 2
I've been trying to create an image mouseOver effect using CSS without any success. My current css code is:

<a href="docs/sorry.html"><img src="images/member.jpg" width=190 height=45 border=0><a/>

the other image is located in the same place and called "member2.jpg"

Can you help please.
Feb 3 '12 #1
Share this Question
Share on Google+
3 Replies


Rabbit
Expert Mod 10K+
P: 12,430
The HTML should be nested something like this:
Expand|Select|Wrap|Line Numbers
  1. <a><div></div></a>
Then your css should use a different background image using the hover.

Or if you don't want to store the image paths in the css sheet, you could nest the HTML like this:
Expand|Select|Wrap|Line Numbers
  1. <a><img><img></a>
And use CSS to toggle visibility or z-index.
Feb 3 '12 #2

P: 2
I'm sorry Rabbit, but I don't understand your answer. Can you be a little more specific?

I've been trying to create an image mouseOver effect using CSS without any success. My current css code is:

<a href="docs/sorry.html"><img src="images/member.jpg" width=190 height=45 border=0><a/>

the other image is located in the same place and called "member2.jpg"

Can you try to help me again, please.
Feb 3 '12 #3

Rabbit
Expert Mod 10K+
P: 12,430
If you're going to go the image route, you need both image elements in there. Then you can use the on hover to toggle the visibility of your image elements or modify the z-index.
Feb 3 '12 #4

Post your reply

Sign in to post your reply or Sign up for a free account.