Mouseover Effect For Complete DIV

[justlukeyou]

Hi,

Can anyone advise how to change the background colour of a complete DIV upon mouseover.

Is there a term for it?

[PowerBit]

Since you're learning I would google 'hover tutorials'. It's the hover mode that change on mouse over. I think that would be enough. I will check...


I just checked these Keywords: css hover tutorial.

There is a complete list of people who have already explained things.

Best Regards

[ralph.m]

Can anyone advise how to change the background colour of a complete DIV upon mouseover.

It's very simple. If you have a div with, say, a class of "feature", you'd do something like this:

.feature:hover {
  background: red;
}

[justlukeyou]

Brilliant thanks, how do I a class to the DIV?

[ralph.m]

Brilliant thanks, how do I a class to the DIV?

In your HTML, just add the bit in blue to the opening <div> tag of the div you want to see the effect on:

<div class="feature">

</div>

Of course, call the class whatever you like. "feature" is just an example.

[justlukeyou]

Hi,

This is the HTML and CSS I have but I cant get it to work, am I doing it correctly?

<div id="aboutuslinksheader">
<div id="feature">
About
</div>
</div>

#aboutuslinkscell {
float:left;
width:25%;
padding-left: 1%;
border:1px solid #CBCBCB;
}


#feature:hover {
background: #7B7B7B;
}

[ralph.m]

Yes, that should work nicely. Something else on your page must be getting in the way. (You aren't testing this in IE6, I presume? The hover effect only works on links in that dead browser.)

Can you post a link to your page?

Edit:

I should clarify that the hover effect should work here. But the float: left etc. can't work as they are for a div with a different id from that of the outer div in your HTML.

[justlukeyou]

Hi,

I got it working thanks however I have padding inside the aboutuslinks DIV for the content but the padding doesn't change colour. Is there anyway of making the padding area change colour also?

#aboutuslinks {
float:left;
width:96%;
font-family:helvetica, geneva, serif;
font-size:1.2em;
border:1px solid #CBCBCB;
color: #7B7B7B;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 3%;
}


#feature:hover {
background: #7B7B7B;
}

[ralph.m]

Is there anyway of making the padding area change colour also?

You'll need to put that padding on the feature div instead. Is there actually a need for the outer div? That is, does it contain any content that's not inside the feature div? If not, then just merge the two into one.

[justlukeyou]

Hi,

I merged the two together but all the padding and font styling only comes into affect when I mouseover the DIV.

I set out two DIVs so only the background would change on Mouseover. But the padding on the DIV surrounding feature doesn't change colour.

[kohoutek]

Can you show us the new HTML and CSS code you currently have?

[justlukeyou]

This is what I have, whatever change I make it doesn't have the desired affect of making everything in aboutuslinks change colour including the padding.

<div id="aboutuslinks">
<div id="feature">
Links One
</div>
</div>

#aboutuslinks {
float:left;
width:96%;
font-family:helvetica, geneva, serif;
font-size:1.2em;
border:1px solid #CBCBCB;
color: #7B7B7B;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 3%;
}


#feature:hover {
background: #F4F5FF;
}

[kohoutek]

It can't because the #feature is inside of #aboutus, meaning #feature can only occupy the space that is left and the padding belongs to the outer element, not the inner element.

So, instead you'd need to apply the padding to the inner element:

#aboutuslinks { 
float:left;
width:96%;
font-family:helvetica, geneva, serif;
font-size:1.2em;
border:1px solid #CBCBCB;
color: #7B7B7B;
}


#feature {
padding-top: 3px;
padding-bottom: 3px;
padding-left: 3%;
}




#feature:hover {
background: #F4F5FF;
}

[justlukeyou]

I see, cheers dude.