homepage Welcome to WebmasterWorld Guest from 54.196.162.238
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Background color change on hover
For a div tag
gms3651




msg:3208267
 5:50 pm on Jan 4, 2007 (gmt 0)

Hello,
I want my <div> background to change when the mouse hover's over the <div> tag. I can get it to work on a <a> tag but not a <div> tag. Below is my CSS and HTML Code

CSS:
.link1 {
height:40px;
text-align:center;
border: 1px dotted #9a9a9a;
padding-top:20px;
width:200px;
}

.link1 div:hover {
background-image:url(/images/black_bg.gif);
}

//////////////////////////////////////////////////

HTML Code

<div class="link1"><a href="http://www.mysite.com">Link 1</a></div>
<div class="link1"><a href="http://www.mysite.com">Link 2</a></div>

Thanks for any help.

 

Fotiman




msg:3208319
 6:16 pm on Jan 4, 2007 (gmt 0)

IE6 does not support the :hover psuedo class on anything except <a href> elements. You can get around this, though, by using a special behavior file (.htc) from Peterned [xs4all.nl]. This is often referred to as hover.htc or csshover.htc.

milanmk




msg:3208339
 6:25 pm on Jan 4, 2007 (gmt 0)

Alternately, try Suckerfish :hover [htmldog.com].

Milan

penders




msg:3208380
 6:57 pm on Jan 4, 2007 (gmt 0)

I can get it to work on a <a> tag...

You could style your <a> elements to completely fill the DIV:
.link1 a {
display:block;
width:100%;
}

And then use the :hover on the <a> as you say you have done. I would have thought that this was more intuitive for your users, since when the background changes the user would naturally expect they can *click* the link. If you change the background when over the DIV (and not the <a>) they cannot.

As an aside: FF does support the :hover pseudo class on DIV (and other) elements.

gms3651




msg:3208456
 7:49 pm on Jan 4, 2007 (gmt 0)

Thanks for the replies.

I decided to use what penders said. And everything works great. However, I still have one small problem. I specified the height of my div tags. But I can't seem to center the text vertically within my div tag. I was using a padding-top:10px, and that worked until I added the '.link1 a:hover'. Because now the hover over image doesn't fill the entire div tag (because of the padding-top:10px). I tried 'vertical-align:10px' but that does not seem to work.

Any Suggestions?

penders




msg:3208705
 11:54 pm on Jan 4, 2007 (gmt 0)

I specified the height of my div tags.

Set the height of your <a> tags also, to the same, or maybe 100%? So that the <a> really does fill your DIV.

But I can't seem to center the text vertically within my div tag. I was using a padding-top:10px...

Rather than setting the padding on your DIV tag, set it on your <a> tag instead - that should sort it. Alternatively set padding-top:0; and set line-height: on your <a> to the same as your height - this works great for vertically centreing a single line of text.

gms3651




msg:3208858
 2:44 am on Jan 5, 2007 (gmt 0)

Ok,
I'm having a little trouble on vertically aligning my text. As of now everything works except my text is not vertically centered before the mouse hover's over the link. The text is centered when the mouse hover's over the text.

Below is my CSS and HTML Code:

CSS:

.link1 {
text-align:center;
border: 1px solid #000000;
width:190px;
height:30px;
}

.link1 a {
height:100%;
padding-top:5px;
}

.link1 a:hover {
display:block;
color:#D6BE7E;
width:100%;
background-image:url(/images/brown_bg.gif);
height:25px;
}

////////////////////////////////////

HTML

<div class="link1"><a href="www.mysite.com">Link1</a></div>
<div class="link1"><a href="www.mysite.com">Link2</a></div>
<div class="link1"><a href="www.mysite.com">Link3</a></div>

I'n not sure what you mean about the padding in my <a> tag.

Thanks

penders




msg:3209220
 12:54 pm on Jan 5, 2007 (gmt 0)

The text is centered when the mouse hover's over the text.

The clue is in the question... some of your styling needs to be moved from your "a:hover" pseudo class to the "a" rule:

.link1 a {
display:block;
width:100%;
height:25px;
padding-top:5px;
}

.link1 a:hover {
color:#D6BE7E;
background-image:url(/images/brown_bg.gif);
}

Assuming a height:25px (as opposed to 30px) is OK? Your <a> does not fill your <div>, so there will be a gap of 5px beneath it?

I'n not sure what you mean about the padding in my <a> tag.

You have moved the padding from ".link1" (your <div> tag) to ".link1 a" (your <a> tag) which I would have said is probably the correct thing to do here.

SuzyUK




msg:3209231
 1:26 pm on Jan 5, 2007 (gmt 0)

Your <a> does not fill your <div>, so there will be a gap of 5px beneath it?

it should fill,
(content)height + top/bottom padding = actual element height
similarly width
(content)width + left/right padding = actual element width

to be sure no conflicts arise you can remove the height off the div and the <a>'s height and padding will control it too, making it the one place you need to tweak to adjust for your image height..
and yes because of this moving the padding to the <a> element, I would say too, is the right thing to do it's that element which you want to manipulate.

.link1 {
text-align:center;
border: 1px solid #000;
width: 190px;
}

.link1 a {
display:block;
height:25px; /* this + top padding = height for image */
padding-top:5px;
}

.link1 a:hover {
color:#D6BE7E;
background-image:url(/images/brown_bg.gif);
}

[edited by: SuzyUK at 1:28 pm (utc) on Jan. 5, 2007]

penders




msg:3209253
 1:56 pm on Jan 5, 2007 (gmt 0)

"Your <a> does not fill your <div>, so there will be a gap of 5px beneath it?"

it should fill,
(content)height + top/bottom padding = actual element height

Oops, yeah! You're absolutely right, sorry about that!

gms3651




msg:3209310
 2:48 pm on Jan 5, 2007 (gmt 0)

Thanks everybody I got it to work!

Penders, let me know if you ever need a job reference...I'll vouch for your skills in CSS!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved