CODEWITHSUNDEEP
csssass
user3242861
user3242861

Reputation: 1929

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 https://jsfiddle.net/dgv0sas9/1/

.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>
</div>

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

How can i do that?

Thank's

Upvotes: 0

Views: 141

Answers (1)

sammyray
sammyray

Reputation: 89

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).

Upvotes: 1

Related Questions