Question

The idea for the piece of css/jQuery I’m playing about with is that basically, one div of colour sits on top of another, then fades out with a link on the top so that the colour behind the main div shows through on mouseover and returns back to the main colour after you leave the div.

My issue is that basically I can’t fit the text into a division and have it constantly on top because if it’s placed in the fading div then the text obviously fades out, likewise it won’t always show up when it’s on the bottom div. So far I have this:

css:

    .logo{
        width: 200px;
        height: 100px;
        background-color: #519CC4;
        float: left;
        text-align: center;
    }

    .barofcolour{
        width: 200px;
        height: 100px;
        background-color: #51B9C4;
        float: left;
        position: absolute;
    }

body:

<div class="logo">
      <!--put text here-->
</div>
<div class="barofcolour">
      <!--or here-->
</div>

jQuery:

    $(document).ready(function(){
        $(".barofcolour").hover(function(){
            $(".barofcolour").fadeTo("1000", 0);
            },function(){
            $(".barofcolour").fadeTo("1000", 1);
        });
    });

So if anybody could give any insight as to how I could make some text sit ALWAYS on top of both the fading colour bar and the static bar of colour. That’d be nice.

Answer 1

If you always want the same text but just have the background color change, you could use CSS transitions instead of fading an overlapping div:

HTML

<div class="logo">
      Text 
</div>​

CSS

.logo{
    width: 200px;
    height: 100px;
    background-color: #519CC4;
    float: left;
    text-align: center;

    transition: background-color 1s;
    -moz-transition: background-color 1s; /* Firefox */
    -webkit-transition: background-color 1s; /* Safari and Chrome */
    -o-transition: background-color 1s; /* Opera */
}
.logo:hover { background-color: #51B9C4; }

​Demo

Edit: If you want to use a jQuery solution, you could also do something like this:

$(document).ready(function(){
    $(".logo").hover(function(){
        $(this).animate({ backgroundColor: '#51B9C4'}, 1000);
        },function(){
        $(this).animate({ backgroundColor: '#519CC4'}, 1000);
    });
});​

Note that you would need either jQuery UI or some other color animation plugin (or write one yourself).

Demo