Grow your CSS skills. Land your dream job.

Transition problem

  • # December 22, 2012 at 2:19 pm

    The code is here: http://codepen.io/joe/full/hsmHb . So the problem is that after i remove the cursor from the hovered dropdown, the background disapears before the text. I know it’s because of the transitions on the a element, but i kind of want to keep those. So, how do i get the background to transition like the text? Or at least how to make the text vanish at the same time as the background?

    # December 22, 2012 at 3:04 pm

    .main-menu ul > li ul {
    background: #FA5858;
    visibility: hidden;
    position: absolute;
    left: 0px;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    }

    edited it here for you.

    http://codepen.io/danieldatton/pen/CiIsr

    Danny D.

    # December 25, 2012 at 4:56 am

    Thanks Daniel.

    # December 25, 2012 at 5:29 am

    @danieldatton If you are using the `all` keyword, then you can actually just remove it, as that is the default.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".