www.webdeveloper.com
Results 1 to 3 of 3

Thread: Trying to make hover over colors fade out

  1. #1
    Join Date
    Apr 2011
    Posts
    25

    Trying to make hover over colors fade out

    Hey guys, I'm trying to make the hover-over color on my menu fade out so it has a smoother appearance when you scroll over the menu.

    Is there any way to make the hover over color fade out instead of the typical "on/off" ?

    Here is the css:

    Code:
    .notice-box .form-body .fieldContainer .formTitle {width: 460px;  }
    
    .notice-box .form-body .fieldContainer {width: 460px;  }
    
    #divider220 {width: 940px; margin-right: 0px; float: left; background-image:url('/storage/generic/dottedvert4.jpg')}
    
    
    
    #modulePage6025537 .largetexthome {display: none !important;}
    
    
    
    
    
    #one {width:220px; margin-right: 20px; float: left; font-size: 12px; line-height: 16px;}
    #two {width:220px; margin-right: 20px; float: left; font-size: 12px; line-height: 16px;}
    #three {width:220px; margin-right: 20px; float: left; font-size: 12px; line-height: 16px;}
    #four {width:220px; margin-right: 0px; float: left; font-size: 12px; line-height: 16px;}
    
    #left220 {width:220px; margin-right: 20px; float: left; font-size: 12px; line-height: 16px;}
    #right700 {width:700px; margin-right: 0px; float: left; font-size: 12px; line-height: 16px;}
    
    #left460 {width:460px; margin-right: 20px; float: left; font-size: 12px; line-height: 16px;}
    #right460 {width:460px; margin-right: 0px; float: left; font-size: 12px; line-height: 16px;}
    
    
    
    #masthead {
    height: 40px;
    width: 940px;
    margin: 0px 0px 10px 0px;
    padding-bottom: 10px; }
    
    #masthead .mark {
    margin: 3px 0px 0px 2px;
    float: left; }
    
    #masthead img {
    width: 210px;}
    
    
    #masthead ul { 
    margin: 0px 0px 0px 0px;
    padding: 0;
    list-style-type: none;
    float: right; }
    
    #masthead li { 
    display: block; 
    height: 38px; 
    width: 110px; 
    background: #dddebd url(/storage/generic/rule_nav.gif) no-repeat left top;
    font-family: georgia; serif;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px; 
    line-height: 38px; 
    color: #000; 
    text-align: center;
    float: left; }
    
    #masthead li a:link, li a:active, li a:visited  {
    display: block;
    background: #dddebd url("/storage/generic/rule_nav.gif") no-repeat left top;
    color: #000; 
    text-decoration: none; }
    
    #masthead li a:hover  {
    display: block;
    background: #D8D9B8 url("/storage/generic/rule_nav.gif") no-repeat left top;
    color: #000; 
    text-decoration: none; }
    
    
    
    
    #navigationTop .horizontalNavigationBar { z-index:10; width: $(CanvasWidth-ContentPaddingExternal-ContentPaddingExternal)$; }
    
    #navigationBottom .horizontalNavigationBar { width: $(CanvasWidth-ContentPaddingExternal-ContentPaddingExternal-20)$; }

  2. #2
    Join Date
    Apr 2011
    Posts
    25
    Any suggestions?

  3. #3
    Join Date
    Jul 2006
    Posts
    207
    Try CSS3 transitions, or resort to JavaScript for better browser support.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles