On Nov 16, 2009, at 8:12 PM, John Franks wrote:
> Hi, I'd be very grateful for help. I am quite new to CSS and a
> little confused. Thank you very much in advance.
First things first: welcome around !
> The site I am building is here at www.euro-peanflooring.co.uk
> 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 {
> ...
> }
> #footer #backToTop a.backToTop, #footer #backToTop a.backToTop:link,
> #footer #backToTop a.backToTop:visited {
> ...
> }
Did you intended to have the <div> nested inside the <a href> element ?
If so, one, it is an invalid html construct; and two, that might be
the source of your problems because the selectors you use have it in
reverse (and thus don't match what is in your html).
#footer #backToTop a.backToTop translates as:
select a 'a' with class 'backToTop' that is a descendent of an
element with ID 'backToTop' that itself is a descendent of and element
with ID 'footer'
As in this HTML
<div id="footer"><div id="backToTop"><a href="backToTop" class="">my
text link</a></div></div>
(with that html structure, your css code should work fine.)
SelectOracle is a handy resource to translate all those selectors in a
human readable way.
<http://gallery.theopalgroup.com/selectoracle/>
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
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/
