Thanks pete, that's exactly what I've done.
On Dec 5, 1:34 pm, "pete higgins" <[EMAIL PROTECTED]> wrote:
> One way would be to put two block elements in a third that has
> position:relative and the children each have position:absolute; top:0;
> left:0; and the one with text has a higher zIndex. Fade out the "underlay",
> leaving the content?
>
> On Dec 4, 2007 5:25 PM, jonhobbs <[EMAIL PROTECTED]> wrote:
>
>
>
> > HI Guys,
>
> > I'm trying to fadeIn the background image of an A tag (which is set to
> > display:blovk so effectively a div) when you roll over it. The A tags
> > form the main menu of a site I am designing.
>
> > I haven't managed to find any way of changing the Background Image
> > opacity using css so can't use the normal animate method.
>
> > I came up with one idea which was to wrap a coupld of block elements
> > inside each other. Each A tag would have the background image applied
> > and over the top of that there would be another block element with a
> > white background which I would fade out when I wanted the background
> > image to be visible.
>
> > The problem I have found is that when I fade the div with the white
> > background it also fades the contents, including the text of the menu
> > item.
>
> > Here is my Jquery.....
>
> > $(".MyMenu a").hover(
> > function () {
> > $(this).children(".Fade").fadeOut("fast");
> > },
> > function () {
> > $(this).children(".Fade").fadeIn("fast");
> > }
> > );
>
> > Here is my CSS...
>
> > .MyMenu{}
> > .MyMenu a{display:block; background:url(MenuBack.gif) no-repeat right
> > center; text-align:right;}
> > .MyMenu a .Fade{display:block; background-color:White;}
> > .MyMenu a .Text{display:block; padding:4px 28px 5px 0;}
>
> > And here is the HTML......
>
> > <div class="MyMenu">
> > <a href="#"><span class="Fade"><span class="Text">Summary</
> > span></span></a>
> > <a href="#"><span class="Fade"><span class="Text">Full
> > Description</span></span></a>
> > <a href="#"><span class="Fade"><span class="Text">Compare
> > Specs</span></span></a>
> > <a href="#"><span class="Fade"><span class="Text">Images &
> > Video</span></span></a>
> > <a href="#"><span class="Fade"><span class="Text">User
> > Reviews</span></span></a>
> > </div>
>
> > Can anyone htink of an easier way to do this, or a better way
> > altogether ?
>
> > Jon
