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
>
