SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast Random Terrain's Avatar
    Join Date
    May 2007
    Location
    USA
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background image disappears with CSS hover

    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.
    Random Terrain - Gaze in awe and try not to crap your pants.

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please post a link to an example page.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Enthusiast Random Terrain's Avatar
    Join Date
    May 2007
    Location
    USA
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    Please post a link to an example page.
    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:

    http://www.randomterrain.com/futuris...ool-stuff.html



    Thanks.
    Random Terrain - Gaze in awe and try not to crap your pants.

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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://www.alistapart.com/articles/taminglists/
    http://css.maxdesign.com.au/listutorial/
    http://www.webreference.com/programming/css_lists/

    3) IDs should be unique. 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.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Enthusiast Random Terrain's Avatar
    Join Date
    May 2007
    Location
    USA
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the links and info.

    Quote Originally Posted by Kravvitz View Post
    1) Simple. Don't put the background-image on the <a>'s parent.
    For the book image to seem clickable within the text link area, where would I put the background image?


    Thanks.
    Random Terrain - Gaze in awe and try not to crap your pants.

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    SitePoint Enthusiast Random Terrain's Avatar
    Join Date
    May 2007
    Location
    USA
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    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.
    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.

    Quote Originally Posted by Dan Schulz View Post
    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.
    Thanks. I'll remember that from now on.
    Random Terrain - Gaze in awe and try not to crap your pants.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •