[.dark .negativ .antisocial]

Hello everyone,

I´ve got a little problem to set a a:link / hover properties.
I want to make a container to switch by hover to background white to red.
The textcolor has to switch from #333 to #FFF.

But I do not get the container to do that.

Attached you will find a picture which shows what I mean.

Big thanks in advance for some help :-)

Attached File(s)

•  hover.jpg (212.12K)
  Number of downloads: 11

This post has been edited by .dark .negativ .antisocial: 01 February 2012 - 10:20 AM

[J.P]

<a href="">
<div class="box">&nbsp;</div>
</a>

.box {
width: 300px;
display: block;
background-color: red;
}

a.box:hover {
background-color: white;
}

Something along those lines. You need a HTML5 Doctype for this to be valid.

This post has been edited by J.P: 01 February 2012 - 12:30 PM

[.dark .negativ .antisocial]

J.P, on 01 February 2012 - 12:28 PM, said:

<a href="">
<div class="box">&nbsp;</div>
</a>

.box {
width: 300px;
display: block;
background-color: red;
}

a.box:hover {
background-color: white;
}

Something along those lines. You need a HTML5 Doctype for this to be valid.

Thanks for your fast reply.
I´ve tested it and played a little bit but still the background does not change.
No idea why ...

[Wickham]

In the example above the class .box is coded for the div and not for the "a" tag, so try this:-

<a class="box" href="">link text</a>

.box {
width: 300px; height: 300px;
display: block;
background-color: white;
color: #333;
}

a.box:hover {
background-color: red;
color: #fff;
}

This post has been edited by Wickham: 01 February 2012 - 01:14 PM

[.dark .negativ .antisocial]

thank you very much

[J.P]

Just to fix my example the second class was wrong.

It should be:

.box:hover {
background-color: blue;
}

I see Wickham beat me to it though .