Jump to content

  • Log in with Facebook Log in with Twitter Log In with Google      Sign In   
  • Create Account

Subscribe to HRA Now!

 



Are you a Google Analytics enthusiast?

Share and download Custom Google Analytics Reports, dashboards and advanced segments--for FREE! 

 



 

 www.CustomReportSharing.com 

From the folks who brought you High Rankings!



Photo
- - - - -

Css3 Transitions


  • Please log in to reply
1 reply to this topic

#1 scouseflip

scouseflip

    HR 4

  • Active Members
  • PipPipPipPip
  • 201 posts
  • Location:North West, England

Posted 20 January 2011 - 11:51 AM

Hi All

I'm redesigning a site and thought I may as well use the opportunity to play with some of the newer stuff in CSS. My first attempt was to get a link hover colour change to fade in using -webkit-transition. My code is:

CODE
a
{
    color:#776276;
    font-weight:bold;
    -webkit-transition: color 1s ease-out;
    -moz-transition: color 1s ease-out;
    -o-transition: color 1s ease-out;
}

a:hover
{
    color:#000;
}


So my default link color is #776276 (purple), the hover colour is #000 and on hover the transition works fine. BUT when the page first loads, the links appear in the Blue default browser colour first, then fade into my purple link text... Any idea's why this is happening?

Strangely the same effect applied to my main menu does not experience the same problem, only difference is that the menu has an overriding style in the CSS file:

CODE
#topMenu a
{
    color:#999;
    font-weight:bold;
    text-decoration:none;
    display:block;
    width:145px;
    height:30px;
    border-right:solid 1px #999;
    padding:8px 0px 0px 0px;
}

#topMenu a:hover
{
    background-color:#999;
    color:#333;
}


BTW - test page that shows this problem (when using Chrome) is www.justdine.com/jdnew/default.aspx

Cheers

Andy

#2 chrishirst

chrishirst

    A not so moderate moderator.

  • Moderator
  • 6,938 posts
  • Location:Blackpool UK

Posted 22 January 2011 - 11:37 AM

Works ok for me but in FF the "Summer Sale" banner image is over the menu on the left rather than on the right side




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

SPAM FREE FORUM!
 
If you are just registering to spam,
don't bother. You will be wasting your
time as your spam will never see the
light of day!