user3242861 user3242861 - 1 year ago 92
Sass (Sass) Question

Sass - Transition hover more than one element

I'm trying to hover an element and affect this element and another but i do not get.

This is my code version in sass

.portfolio-services {
width: 100%;
height: 200px;
max-height: 200px;
.portfolio-services .rectangle, .portfolio-services .home-portfolio, .portfolio-services .home-services {
width: 50%;
height: 100%;
float: left;
cursor: pointer;
.portfolio-services .home-portfolio {
background-color: white;
-webkit-transition: width 2s ease;
-webkit-transform: translateZ(0);
.portfolio-services .home-services {
background-color: #222222;
-webkit-transition: width 2s ease;
-webkit-transform: translateZ(0);
.portfolio-services .home-services:hover {
width: 100%;
.portfolio-services .home-services:hover .home-portfolio {
width: 0%;

<div class="portfolio-services">
<div class="home-portfolio"></div>
<div class="home-services"></div>

When i hover the
i want that this class update the width to 100% and the class
pass to width 0.

How can i do that?


Answer Source

There's a couple of problems with what you've written here.

Let's look at the following line of code:

.portfolio-services .home-services:hover .home-portfolio { width: 0%; }

What this is actually saying is that .home-portfolio is a child of .home-services. Based on your HTML structure, we know that they're siblings.

I've created an example here, but there's still a problem. Styles can only go down a chain. In the example only the first box works as you've described (home-portfolio). This is because a sibling can only effect a sibling that comes after itself. Siblings can't alter a sibling that came before it.

This works: [A] ---> [B]

This doesn't: [A] <--- [B]

Here's a different solution. Since .home-services can't change .home-portfolio, we can try a different tact. In this case, we're not shrinking anything, but the layout is still adjusting in the way you suggested. Plus, I've opted to use transforms, which are considered better properties to transition anyways (since animating width has negative impacts on browser performance).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download