Treehouse: Grow your CSS skills. Land your dream job.

Triggering transitions on a different element.

  • # April 10, 2013 at 12:48 pm

    Hi guys!

    I’m playing with the transitions, and I want to do something that I’m not enterely sure is possible.

    I have an a.about in a div, and I want to trigger a transition from a completely different div on a.about:hover or :active. So far is not working. You can see the problem [here.]( “here”). I want to open the right div containing the info when the menu item is hovered or clicked on.

    Two things; I’ve achieved something like this when the 2 elements are inside the same div. It was nice, but not ideal, as the transition was only maintained while the mouse was on hover. You can see it [here.]( “here”).

    I thought that to prevent the div from returning to the initial position, I could use < button > , but I haven’t been able to trigger it either way.

    Any thoughts?



    # April 10, 2013 at 12:53 pm

    You can use checkbox hack or :target pseudo class, but I’d probably go for JavaScript on this one.

    # April 10, 2013 at 12:59 pm

    I wanted to keep it CSS only for whatever reason… Will try the checkbox hack!

    # April 10, 2013 at 1:01 pm

    If you run into any problems let me know.

    # April 10, 2013 at 1:13 pm

    It doesn’t seem to work either. Maybe something to do with the positions?

    [Link]( “”)

    Thanks mate! : )

    # April 10, 2013 at 2:16 pm

    This might get you started :)
    (only about works)

    # April 10, 2013 at 2:22 pm


    Many thanks!! : )))

    # April 10, 2013 at 2:24 pm

    You’re welcome! Make sure to test thoroughly as this isn’t normal use of checkboxes (actually radios in this case) :P

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

You must be logged in to reply to this topic.