Here is a CSS trick to make multiple elements do something in synch, using child combinators. In my case, I wanted to have my nav sidebar slide out on mouse hover and, at the same time, have the menu icon rotate:
The pictures show before and after (icon rotated 90°, sidebar slide out).
The trick to do this (without using JavaScript) is to put the elements under the common parent element and then use child combinator with the hover selector, like so:
The trick to do this (without using JavaScript) is to put the elements under the common parent element and then use child combinator with the hover selector, like so:
Put menu icon and menu slider under common parent:
Use child combinator to specify the transformations:
.al-menu-combo:hover>.menu-btn {
transform: rotate(-90deg);
}
.al-menu-combo:hover>.menu-slider {
transform: translate3d(0px, 0, 0);
}
That’s it.
For the working demo look here: JSBin demo.
424C4F47 