SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Css3 Transitions problem

    I have been playing with the new CSS3 transitions but I am not sure if what I am trying to do will work, or if I am not doing it correctly. I currently have a list item where top line is black and bottom is white. I am trying to essentially have the colors fade and reverse so the top is white and bottom is black. I created two classes and assigned them to each line. However, the top line fades to white perfectly on hover, but the bottom is black and larger even without hovering. Can I only apply one transition per list item? Or am I just not doing it correctly?
    Here is my code....

    HTML Code:
    .bannerR ul li:hover span.b2w{
    color:#fff;  
       -webkit-transition:color 1s ease-in;  
       -moz-transition:color 1s ease-in;  
       -o-transition:color 1s ease-in;  
       transition:color 1s ease-in; 
       
    }	
    
    .bannerR ul li:hover span.w2b{
    	color:#000;  
       -webkit-transition:color 1s ease-in;  
       -moz-transition:color 1s ease-in;  
       -o-transition:color 1s ease-in;  
       transition:color 1s ease-in; 
    }	
    HTML Code:
    <li><a href="sharedhosting.php" style="text-decoration: none;" onmouseover="this.style.textDecoration = 'none'"><span class="b2w">Flexible, Fast Web Hosting</span><br />
                <span class="w2b">Designed for peace of mind.</span></a></li>

    The site is http://www.hostingwebsbest.com/index.php and its the right hand side. Any thoughts?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    In the first example, the bottom line is already black, so it's can't fade to black. If you first color it white, your code works fine:

    Code:
    .w2b {color:white;}

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    It's somewhat counter-intuitive but you define the transitions on the initial state before the change to a property that you want transitioned i.e. without the :hover.

    If you're going to be doing lots with transitions I'd suggest using Compass.
    Code css:
    .bannerR ul li span.b2w{
      color:#000;
      @include transition(color 1s ease-in); 
      &:hover {
        color: #fff;
      }
    }
    which compiles to
    Code css:
    .bannerR ul li span.b2w {
      color: #000;
      -webkit-transition: color 1s ease-in;
      -moz-transition: color 1s ease-in;
      -ms-transition: color 1s ease-in;
      -o-transition: color 1s ease-in;
      transition: color 1s ease-in;
    }
    /* line 12, ../sass/screen.scss */
    .bannerR ul li span.b2w:hover {
      color: #fff;
    }

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome. I was actually trying to figure this stuff out of the Sitepoint book, but theres so much new stuff! Compass does look really useful, thanks for the that.
    But when I used that code, the top still works, but the bottom doesn't. What I was trying to do was have the top go from black to white, and the bottom from white to black.
    @Ralph - Thats why I had the bottom color black originally before Mark showed me I declared it wrong. Can I not transition two seperate "pieces' of a list item?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Try something like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    ul {
    	background:#ccc;
    	list-style:none;
    	margin:0;
    	width:200px;
    	padding:20px
    }
    ul li a{text-decoration:none;}
    ul li span {
    	color: #000;
    	-webkit-transition: color 1s ease-in;
    	-moz-transition: color 1s ease-in;
    	-ms-transition: color 1s ease-in;
    	-o-transition: color 1s ease-in;
    	transition: color 1s ease-in;
    }
    ul li span.b2w { color: #000; }
    ul li span.w2b { color: #fff; }
    ul li a:hover span.b2w { color: #fff; }
    ul li a:hover span.w2b { color: #000; }
    </style>
    </head>
    
    <body>
    <ul>
    		<li><a href="sharedhosting.php"><span class="b2w">Flexible, Fast Web Hosting</span><br />
    				<span class="w2b">Designed for peace of mind.</span></a></li>
    </ul>
    </body>
    </html>
    When you hove the anchor you swap the colours of the spans inside rather than hovering the span.

  6. #6
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That worked! Thank you. And thanks for the explanation! I didn't see it and was about to ask..lol.


Bookmarks

Posting Permissions

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