> CC: [email protected]
> From: [email protected]
> To: [email protected]
> Subject: Re: [css-d] CSS background image hover problem
> Date: Mon, 16 Nov 2009 21:38:16 +0900
>
>
> 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">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/
>
>
>
>
>
Ok, thanks everyone for your help. I am nearly there - Please note that using
seperate images is not an option. I need to learn this background-positioning
technique.
The updated “back to top” image/link in the footer of the site can now be seen
at www.euro-peanflooring.co.uk. You can see that now the “a” letters are used
within the image/link. And as I hover over the “a” letters I get my intended
result (only within the “a” text area). But when I remove the “a” letters then
the whole thing breaks. So I need to remove the “a” letters and then when
hovering over, I still need the image position to change successfully.
Are there any further ideas?
My updated HTML code:
<div id="footer"><div id="backToTop"><a href="#pageTop"
class="backToTop">aaaaa</a></div></div>
My updated CSS code:
#footer {
background-image: url(../images/footerBackground.gif);
height: 350px;
position: relative;
}
#footer #backToTop {
width: 89px;
height: 78px;
display: block;
margin-left: 16px;
margin-top: 26px;
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, #footer #backToTop a.backToTop:active {
background: url(../images/backToTop.png) no-repeat left top;
}
_________________________________________________________________
View your other email accounts from your Hotmail inbox. Add them now.
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/
