Wed, 2004-12-01 10:21
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
Thu, 2004-12-02 09:46
#1
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>