1 reply [Last post]
millers
millers's picture
Offline
Enthusiast
Last seen: 40 weeks 5 days ago
Timezone: GMT+1
Joined: 2004-11-22
Posts: 70
Points: 41

I have a link that I want to display a certain way on one page only, however the hover over isn`t working, nothing happens at all?!?!

.afford a {z-index: 100; display: block; height: 70px; width: 100px; background: url(../images/image1.jpg); border: 1px solid #000000; color: #ffffff; text-align: center; line-height: 70px;}

.afford a:hover {color: #cc0000; text-decoration: none; background-color: #8EDB41;}

<span class='afford'><a href='#' style='color: #000000'>blah</a></span>

I had to put the style tag in the link because the a link was taking the properties from the a css.

Can anyone suggest why it isn`t working?

thanks

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 44 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

a link not performing

In your code for the link you have an inline style - this has I suspect highter specificity that the style sheet code and so over rides it/. Remove it and see.

Also why have a sman around the link? you can just add the class to the link

so have

a.afford
{
z-index: 100;
display: block;
height: 70px;
width: 100px;
background: url(../images/image1.jpg);
border: 1px solid #000000;
color: #ffffff;
text-align: center;
line-height: 70px;
}

a.afford:hover
{
color: #cc0000;
text-decoration: none;
background-color: #8EDB41;
}

and

<a href="#" class="afford">Monkey Jam</a>