我试图做一个过渡,一旦你悬停在它上面,分裂就会扩大,但它对最右边的分裂不起作用,当我悬停在它上面时,它只是以一种奇怪的方式出现故障。
下面是HTML:
<div class="home grow">
<a routerLink = "">HOME</a>
</div>
<div class="books grow">
BOOKS
</div>
<div class="about grow">ABOUT</div>
这里是CSS:
* {
margin: 0;
padding: 0;
}
div {
float: left;
width: 33.33%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.home {
background-color: grey;
}
.books {
background-color: lightblue;
}
.about {
background-color: lightcyan;
}
.grow {
-webkit-transition: width 0.5s;
transition: width 0.5s;
overflow: hidden;
transition: 1.5s;
}
.grow:hover {
width: 90vw;
}
我遇到的另一个问题是当我展开其他的分区时,右边的分区完全消失了
我尝试通过执行以下操作为右边的元素进行特殊的转换
HTML:
<!-- modified the "About" division -->
<div class= "about grow-right">about</div>
CSS:
/* just added a random negative value the the margin to check if it works */
.grow-right:hover {
margin-left: -80px;
}
但它没有工作,它只是留下了一个白色的空间在右边,当我悬停在它。
2条答案
按热度按时间djp7away1#
这就是你想要的吗我添加了一个容器,故障消失了。
3mpgtkmj2#
试试这个,用“flex”代替“float”