Web Design Forum: a:link to full div container - Web Design Forum

Jump to content

WDF
WDF Premium Memberships Reseller Hosting
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

a:link to full div container description picture inside

#1 User is offline   .dark .negativ .antisocial 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 41
  • Joined: 02-July 11
  • Reputation: 5
  • Gender:Male
  • Location:Germany
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 01 February 2012 - 10:19 AM

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)

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

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

0

#2 User is offline   J.P 

  • Expert
  • PipPipPipPip
  • Group: Members
  • Posts: 744
  • Joined: 11-September 07
  • Reputation: 35
  • Gender:Male
  • Location:Jersey Channel Islands
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 01 February 2012 - 12:28 PM

<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

1

#3 User is offline   .dark .negativ .antisocial 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 41
  • Joined: 02-July 11
  • Reputation: 5
  • Gender:Male
  • Location:Germany
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 01 February 2012 - 12:47 PM

View PostJ.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 ...
0

#4 User is offline   Wickham 

  • Web Guru
  • View gallery
  • Group: Moderators
  • Posts: 2,876
  • Joined: 11-June 09
  • Reputation: 257
  • Gender:Male
  • Location:Salisbury UK
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 01 February 2012 - 01:11 PM

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

1

#5 User is offline   .dark .negativ .antisocial 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 41
  • Joined: 02-July 11
  • Reputation: 5
  • Gender:Male
  • Location:Germany
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 01 February 2012 - 01:26 PM

:air_kiss: thank you very much
0

#6 User is offline   J.P 

  • Expert
  • PipPipPipPip
  • Group: Members
  • Posts: 744
  • Joined: 11-September 07
  • Reputation: 35
  • Gender:Male
  • Location:Jersey Channel Islands
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 01 February 2012 - 01:34 PM

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 :cray: .
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users