Question

我想要的效果是在flexbox容器中有一个项目（链接）在悬停时稍微增长或扩展，但是当我将鼠标悬停在单个项目上时，整行项目都会增长。我一直在尝试通过增加填充来做到这一点，如下所示。

我的HTML模板使用Angular 2+语法，但并不难遵循。只是从for循环中动态获取链接列表。

任何帮助，建议或有用的链接将不胜感激！

我的CSS如下〜

.page-flex-link {
display: flex;
flex-flow: row wrap;
bottom: 1rem;
left: 10%;
position: absolute;
}

.page-flex-link > div {
background-color: #28a745;
border-radius: 50%;
padding: .5rem;
margin-left: .2rem;
margin-right: .2rem;
cursor: pointer;
box-shadow: .2rem .2rem .2rem grey;
}

.page-flex-link > div:hover {
background-color: #0f82db;
padding: .6rem;
box-shadow: .3rem .3rem .3rem grey;
}

.pli-text {
color: white;
text-decoration: none;
}

我的angular 7 HTML模板如下〜

<div class="page-flex-link">
  <div *ngFor="let page of lesson.pages"
    (click)="goToPage(page.pageNum)">
    <a class="pli-text" routerLink="/lessons/{{lesson.id}}/pages/{{page.pageNum}}">{{page.pageNum}}</a>
  </div>

Answer 1

.page-flex-link容器根据其子代计算其尺寸。当您增加孩子的填充时，它也会增加容器的整体尺寸。

一个简单的解决方案是使用CSS transform: scale()而不是增加填充。 scale()将增加元素的渲染大小，但不会增加其计算出的尺寸：

.page-flex-link {
  display: flex;
  flex-flow: row wrap;
  bottom: 1rem;
  left: 10%;
  position: absolute;
  align-items: center;
}

.page-flex-link > div {
  background-color: #28a745;
  border-radius: 50%;
  padding: 0.5rem;
  margin-left: 0.2rem;
  margin-right: 0.2rem;
  cursor: pointer;
  box-shadow: 0.2rem 0.2rem 0.2rem grey;
}

.page-flex-link > div:hover {
  background-color: #0f82db;
  /*padding: 0.6rem;*/
  transform: scale(1.2);
  box-shadow: 0.3rem 0.3rem 0.3rem grey;
}

.pli-text {
  color: white;
  text-decoration: none;
}

<div class="page-flex-link">
  <div>
    <a class="pli-text">1</a>
  </div>
  <div>
    <a class="pli-text">2</a>
  </div>
  <div>
    <a class="pli-text">3</a>
  </div>
  <div>
    <a class="pli-text">4</a>
  </div>
  <div>
    <a class="pli-text">5</a>
  </div>
  <div>
    <a class="pli-text">6</a>
  </div>
  <div>
    <a class="pli-text">7</a>
  </div>
  <div>
    <a class="pli-text">8</a>
  </div>
  
</div>

试图让1个项目在flexbox容器中悬停时展开。而是容器中的所有项目都展开

1 个答案: