gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 09:50:17 24 4
gpt4 key购买 nike

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

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

我该怎么做?

谢谢

最佳答案

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

让我们看下面这行代码:

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

关于css - Sass - 过渡悬停在多个元素上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39162834/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com