Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Transition problems

    I'm trying to use a transition when I hover over a menu item. When I hover over a menu item a bullet appears next to it (I used a background to do this). But when I try to use transition in my css, the bullet comes sliding in from the top to the actually place where it should be. I just want it to appear via the transition, not to slide in, what am I doing wrong?

    Code:
    ul.navList a {
    	text-decoration: none;
    	color: #0a0a0a;
    	padding: 5px 20px 5px 20px;
    	background: none;
    }
    
    ul.navList a:hover {
    	background: url('../images/bullet.png') left center no-repeat;
    	-webkit-transition: background 1s;
    	-moz-transition: background 1s;
    	-o-transition: background 1s;
    	-ms-transition: background 1s;
    	transition: background 1s;
    }

  • #2
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Are you saying that you want the item to appear immediately? If that's the case, you can change "1s" to "0s" to make the transition instantaneous instead of one second, or remove all the transition lines entirely.

    If you want to fade the background in, the "opacity" transition would work. Note that this fades the entire link block, both background and any text, and that the transition effects are listed in the main anchor CSS instead of under :hover. Here's what I came up with:

    Code:
    ul.navList a {
    	text-decoration: none;
    	color: #0a0a0a;
    	padding: 5px 20px 5px 20px;
    	background: url('../images/bullet.png') left center no-repeat;
    	zoom: 0;
    	filter: alpha(opacity=0);
    	opacity: 0;
      -webkit-transition: opacity 1s ease;
      -moz-transition: opacity 1s ease;
      -o-transition: opacity 1s ease;
      transition: opacity 1s ease;
      }
    
    ul.navList a:hover {
    	zoom: 1;
    	filter: alpha(opacity=100);
    	opacity: 1;
    
    }
    Hope that helps.

    References:
    http://css-tricks.com/css-transparen...-all-broswers/
    http://www.alistapart.com/articles/u...3-transitions/

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That works great, only one thing, I do need the text to be visible before the hover too, is there a way to do this? I'm sort of stuck trying to think of one since the visibility applies to the entire block as you said.


  •  

    Posting Permissions

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