Background image disappears with CSS hover

Get Started
1

I had the idea last night to try putting little book images next to my Amazon text links. For it to work with my already existing css hover effect, I put the tiny image in the background of the DIV. The problem is that when you move your mouse pointer over the book/text link area, the tiny image disappears because the background color of the hover replaces it until you move your mouse pointer away again.

Is there any way to keep that background image from disappearing during the hover? I searched using Google, but I can’t find the answer. I’m probably using the wrong words in my search.

Thanks.

2

Please post a link to an example page.

3

I thought I read that we weren’t allowed to post links to any of our pages except in our signatures, so that’s why I didn’t post a link.

It’s on the following page on the right side under the words Related Books:

Thanks.

4

  1. Simple. Don’t put the background-image on the <a>'s parent.

  2. You should really be using an unordered list (<ul>) to mark up those links. I suggest you learn how semantics apply to X/HTML. Semantics is really a very important subject when it comes to X/HTML.

These three articles explain how to style lists.

http://css.maxdesign.com.au/listutorial/
http://www.webreference.com/programming/css_lists/

  1. IDs should be unique. [url=http://www.w3.org/TR/REC-CSS2/selector.html#class-html]You could use a class instead.

Class and ID Selectors
When should I use a class and when should I use an ID?
Use class with semantics in mind
The Meaning of Semantics Take II: Naming Conventions for Class and ID in CSS
Using Firefox to Wage a Class War

Multiple elements may belong to the same class and an element may belong to multiple classes. The X/HTML class attribute’s value may be a space separated list of classes.

I thought I read that we weren’t allowed to post links to any of our pages except in our signatures, so that’s why I didn’t post a link.

It seems that they make an exception when we need to see the page in order to answer the question.

5

Thanks for the links and info.

For the book image to seem clickable within the text link area, where would I put the background image?

Thanks.

6

On the <a>s themselves. It should look the same as it does now. The images just won’t disappear when the links are hovered.

7

As Kravvitz said, if you need to post the link so we can help you, that’s fine. SitePoint only gets involved when you post a link for self promotion and advertising purposes.

8

Thanks! I totally forgot you could do that. Before I try the other things you mentioned, I need to finish changing the look of my site (I’m about halfway through). While I’m changing the rest of my site, that will give me time to see if those tiny book images make a difference in sales.

Thanks again. I would not have figured that out on my own.

Thanks. I’ll remember that from now on.