Hi, I'd be very grateful for help. I am quite new to CSS and a little confused.
Thank you very much in advance.
The site I am building is here at www.euro-peanflooring.co.uk. My problem is in
the footer at the bottom of the page, with the “back to top” image/link.
When a user clicks on the "back to top" image/link they should be returned to
the top of the page. I have the functionality where they click on the link and
are returned to the top working well.
I am trying to create the effect where the “back to top” image/link is
initially coloured in white, as is currently happening. But when a user hover’s
over the “back to top” image/link, I want it to change colour to yellow.
To try and achieve this effect I am using a single background image which
contains both the white (link) and yellow (hover) states, so the background
image should be positioned “left bottom” or “left top” depending on which state
is to be displayed. What am I doing wrong?
My HTML code so far is as follows:
<a href="#pageTop" class="backToTop"><div id="backToTop"></div></a>
My CSS code so far is as follows:
#footer #backToTop {
width: 89px;
height: 78px;
margin-left: 16px;
margin-top: 20px;
position: absolute;
background: url(../images/backToTop.png) no-repeat left bottom;
}
#footer #backToTop a.backToTop, #footer #backToTop a.backToTop:link, #footer
#backToTop a.backToTop:visited {
background: url(../images/backToTop.png) no-repeat left bottom;
}
#footer #backToTop a.backToTop:hover {
background: url(../images/backToTop.png) no-repeat left top;
}
#footer #backToTop a.backToTop:active {
background: url(../images/backToTop.png) no-repeat left top;}
_________________________________________________________________
Use Hotmail to send and receive mail from your different email accounts
http://clk.atdmt.com/UKM/go/186394592/direct/01/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
