CSS background-color hover question.

Discussion in 'OT Technology' started by brds, Jun 3, 2007.

  1. brds

    brds OT Supporter

    Joined:
    Jun 26, 2006
    Messages:
    17,642
    Likes Received:
    13
    Location:
    Atlanta
    Hey, i have a div that's 660px wide even though the text inside of it might only be 100 pix long. I need the entire background color of the 660px to change when the user hovers over the text.

    right now, my style.css is:
    Code:
    a.download:hover {
        background-color:#8e8ab8;
    }
    I know there needs to be more then that but i have no clue what.

    Anybody know how to make the entire 660px change background color instead of only the text background color changing?

    Thanks!
     
  2. Penguin Man

    Penguin Man Protect Your Digital Liberties

    Joined:
    Apr 27, 2002
    Messages:
    21,696
    Likes Received:
    0
    Location:
    Edmonton, AB
    Just make it change when the user hovers over the div?

    At least, that's what I'd do.
     
  3. brds

    brds OT Supporter

    Joined:
    Jun 26, 2006
    Messages:
    17,642
    Likes Received:
    13
    Location:
    Atlanta
    that's what i'm trying to do.

    normal background color is white... but when they hover, i want it to change to a certain color. I can do that no problem... it's the width to which the background color goes. As it is now, the color changes only on the width of the text... i want it to change to a width of 660px
     
  4. mobbarley

    mobbarley Active Member

    Joined:
    Mar 4, 2005
    Messages:
    9,256
    Likes Received:
    2
    Location:
    Sydney
    put the text within a span or div, set the divs width, not the text elements width
     
  5. brds

    brds OT Supporter

    Joined:
    Jun 26, 2006
    Messages:
    17,642
    Likes Received:
    13
    Location:
    Atlanta
    so something like in the .css?:
    Code:
    a.background:hover {background-color:#COLOR}
    
    and something like this in the body?:
    Code:
    <div style="width:600px;"><a href="#" class="background">Text goes here</a></div>
    
    

    I tried that and it didn't work. :noes:


    Could somebody please post what the .css code should be and a small example of how to use it in the .html?
     
  6. Penguin Man

    Penguin Man Protect Your Digital Liberties

    Joined:
    Apr 27, 2002
    Messages:
    21,696
    Likes Received:
    0
    Location:
    Edmonton, AB
    HTML:
    Code:
    <div class="testclass">This is some text.</div>
    
    CSS:
    Code:
    div.testclass {
      background-color: white;
      width: 600px;
    }
    
    div.testclass:hover {
      background-color: blue;
      width: 600px;
    }
    
    When you hover over the div itself, the background color will change. This might not be exactly the desired behavior, since the background changes whether the cursor is over the text or not, but I think it's definitely the easiest way to do it.
     
  7. goober

    goober New Member

    Joined:
    Oct 20, 2005
    Messages:
    196
    Likes Received:
    0
    You could also use {display:block;} on the text, so that the text fills the whole width. That way when you hover over any part of the region it would be included as hovering over the text.
     
  8. brds

    brds OT Supporter

    Joined:
    Jun 26, 2006
    Messages:
    17,642
    Likes Received:
    13
    Location:
    Atlanta
    Penguin man, tried your example and it gave me the same result where only the length of the text was given a background.

    Goober, i tried your example, and it worked! Thanks
     
  9. Penguin Man

    Penguin Man Protect Your Digital Liberties

    Joined:
    Apr 27, 2002
    Messages:
    21,696
    Likes Received:
    0
    Location:
    Edmonton, AB
    In what browser? Works fine for me in Firefox.
     
  10. brds

    brds OT Supporter

    Joined:
    Jun 26, 2006
    Messages:
    17,642
    Likes Received:
    13
    Location:
    Atlanta
    that's what i tried... as well as IE and opera. Didn't work in any of them; although i was prolly just doing it wrong :mamoru:
     
  11. tryfuhl

    tryfuhl New Member

    Joined:
    Oct 4, 2003
    Messages:
    75,450
    Likes Received:
    0
    Location:
    MD/DC Metro
    that sounds annoying, link to example?
     
  12. whup

    whup I wish you had children and.. so that I could step

    Joined:
    Feb 12, 2007
    Messages:
    1,603
    Likes Received:
    0
    Read the thread starter post, and was going to answer with this.

    This is the best way to do it as long as you're not happy with the text block being as wide as the div. The reason being, IE 6 and under don't support :hover styles on anything other than anchors.
     
  13. Penguin Man

    Penguin Man Protect Your Digital Liberties

    Joined:
    Apr 27, 2002
    Messages:
    21,696
    Likes Received:
    0
    Location:
    Edmonton, AB
    Ah, interesting. http://dean.edwards.name/ie7/ FTMFW.
     
  14. whup

    whup I wish you had children and.. so that I could step

    Joined:
    Feb 12, 2007
    Messages:
    1,603
    Likes Received:
    0
    Yeah I used to use that library. It still really messed up some sites though in IE6. Now we pretty much test each site in IE6 and put in the necessary workarounds to make it work exactly as we want.
     

Share This Page