Currently, I am utilizing Bourbon's Neat library to structure my grid system.
Within my code, I have the following setup:
section {
@include outer-container;
aside { @include span-columns(3); }
article { @include span-columns(9); }
}
The challenge I am facing is that I would like to expand the width of the aside element by 50px when hovered over. Nevertheless, doing so causes the article to shift to the next line.
Is there a method to adjust the width of one column and automatically resize the other column accordingly?
I am aware that this can be achieved with JavaScript, but I am curious if there is a way to accomplish this using the Neat grid-system.
Thank you!
UPDATE
After testing, I successfully implemented the following solution:
section {
@include outer-container;
aside {
@include span-columns(3);
&:hover {
@include span-columns(2);
& + article {
@include span-columns(11);
}
}
}
article { @include span-columns(9); }
}
By utilizing the CSS sibling selector +, I can select the article element when hovering over the aside.