css - Sass - 过渡悬停在多个元素上

Question

我试图将一个元素悬停并影响这个元素和另一个元素，但我没有得到。

这是我在 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>

当我将鼠标悬停在 .home-service 上时，我希望此类将宽度更新为 100%，而 .home-portfolio 类将宽度设为 0。

我该怎么做？

谢谢

Answer 1

你在这里写的有几个问题。

让我们看下面这行代码:

.portfolio-services .home-services:hover .home-portfolio { 宽度:0%； }

这实际上是说 .home-portfolio 是 .home-services 的子项。根据您的 HTML 结构，我们知道它们是兄弟。

我创建了一个示例 here ，但还是有问题。样式只能沿链向下。在示例中，只有第一个框按照您所描述的方式工作(home-portfolio)。这是因为同胞只能影响在 自身之后的同胞。 sibling 不能改变在它之前出现的 sibling 。

这有效: [A] ---> [B]

这不是: [A] <--- [B]

这是一个 different solution .由于 .home-services 无法更改 .home-portfolio，我们可以尝试不同的策略。在这种情况下，我们不会缩小任何东西，但布局仍会按照您建议的方式进行调整。另外，我选择使用转换，无论如何转换都被认为是更好的转换属性(因为动画宽度会对浏览器性能产生负面影响)。