0

I have a simple anchor button:

<a href="/our-news" class="SectionNavButton">
    <span class="SectionNavButton-Inner">
</a>

I would like the background colour of SectionNavButton-Inner to transition when its parent SectionNavButtonis hovered over/off and when a class of active is added to it (the parent).

My Sass:

.SectionNavButton
{
    .SectionNavButton-Inner
    {
        @include transition(background 0.4s ease-in-out);
        background: $style-default-link-color;
    }

    &:hover,
    &.active
    {
        .SectionNavButton-Inner
        {
            background: $style-default-link-hover-color;
        }
    }
}

This works great for hover, but there is no transition when I add an active class to the SectionNavButton (though the background colour does change).

Why is there no transition when I add a class of active to the SectionNavButton?

Icarus
  • 1,627
  • 7
  • 18
  • 32
Undistraction
  • 42,754
  • 56
  • 195
  • 331
  • Do you want the transition to happen when the page is loaded? Here is a JSfiddle that may helps you: http://jsfiddle.net/4W82d/ and while we are at it: http://stackoverflow.com/questions/6805482/css3-transition-animation-on-load – Nico O Apr 30 '14 at 11:25
  • 2
    Hi @Pedr, I tried threw your code into jsfiddle and it seems to work fine for me (on Chrome). I see the transition on hover and when class active is added. See [**HERE**](http://jsfiddle.net/ZS6pr/) – Martin Turjak Apr 30 '14 at 12:28
  • @MartinTurjak Thanks for that. Looks like it's context specific. Seems to be some kind of conflict arising from a transition on a parent element. – Undistraction Apr 30 '14 at 12:52

0 Answers0