Question

我试图悬停一个元素并影响这个元素而另一个但我却没有。

这是我在sass https://jsfiddle.net/dgv0sas9/1/

中的代码版本

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

当我悬停.home-service时，我希望此类将宽度更新为100％，类.home-portfolio传递给宽度为0.

我该怎么做？

感谢＆＃39; S

Answer 1

你在这里所写的内容存在一些问题。

让我们看看以下代码行：

48.2701 18.868 42.9535 7 39.2046 5.09902 29

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

我已经创建了一个示例here，但仍然存在问题。样式只能沿着链条走下去。在示例中，只有第一个框符合您的描述（家庭投资组合）。这是因为兄弟姐妹只会影响后的兄弟姐妹。兄弟姐妹不能改变之前>之前的兄弟姐妹。

这有效： [A] ---＆gt; [B]

这不是： [A]＆lt; --- [B]

这里是different solution。由于int indexofsmallest = 2; smallest = *min_element(distances.begin(), distances.end()); int pos = find(distances.begin(), distances.end(), smallest) - distances.begin(); indexofsmallest = pos; cout << "||" << smallest << "||" << endl; cout << "index of smallest is:" << indexofsmallest + 1 << endl;无法更改.portfolio-services .home-services:hover .home-portfolio { width: 0%; }，我们可以尝试不同的机智。在这种情况下，我们不会缩小任何内容，但布局仍然按照您的建议进行调整。另外，我选择使用转换，转换被认为是更好的转换属性（因为动画宽度会对浏览器性能产生负面影响）。

Sass - Transition悬停多个元素

1 个答案: