防止悬停改变链接的高度

Posted 2023-03-06

【中文标题】防止悬停改变链接的高度

【英文标题】：Prevent hover from changing link's height

【发布时间】：2019-05-06 10:40:55

【问题描述】：

使用 Angular、Angular Material 和 Angular Flex-Layout，我创建了一组样式类似于卡片或图块的链接。当链接未悬停时，将显示链接的图标和标题。悬停时，图标和标题不再显示并替换为信息文本。

对于具有大量信息文本的项目，这种状态变化会导致项目的高度增加。

我可以通过使用像素对min-height 进行硬编码来解决此问题。但是，如果我尝试使用百分比，例如 110%，则链接的大小不会发生变化。对于名为 .container 的链接周围的 div 也是如此。

摘录如下：

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">

  <a mat-flat-button color="primary" fxFlex href="https://example.com/footprints">
    <div class="hoverOff"><fa-icon [icon]="faToolbox"></fa-icon>Broken</div>
    <div class="hoverOn">Is your request causing an impact to a business-critical function, which is impacting daily production?</div>
  </a>

  <a mat-flat-button color="primary" fxFlex href="https://example.com/divisions/dev/Lists/Requests/NewForm.aspx?isProject=Yes">
    <div class="hoverOff"><fa-icon [icon]="faPuzzlePiece"></fa-icon>Project</div>
    <div class="hoverOn">Is your request a new product or service?<br>
      Requires and RFI or RFP?<br>
      Requires more than 500 or more internal resource hours<br>
      Necessitates a cost greater then $100,000?<br>
      New banking center or remodel?<br>
      New Partnership, divestiture or branch closure?
    </div>
  </a>

</div>

<style>
.mat-flat-button 
    white-space: normal;
    line-height: normal;


a 
    color: white !important;
    display: flex;
    justify-content: center;
    align-items: center;


fa-icon 
    display: block;
    font-size: 75px;


.mat-primary 
    background-color: #00539B !important;


a .hoverOn 
    display: none;


a:hover .hoverOn 
    display: block;


a:hover .hoverOff 
    display: none;

</style>

I have created an example of this on StackBlitz.

如何在不对像素进行硬编码的情况下解决这种高度变化？

【问题讨论】：

@Marshal 未切断。我希望能够以比使用像素更好的方式设置链接高度。似乎不是解决悬停时大小变化的一种非常安全的方法。

【参考方案1】：

在您的 CSS 中添加以下内容将防止滚动时的高度变化，同时使用视口高度 vh 的 45%

.container
  height:45vh

同样使用以下内容会将容器扩展 10%，超出 vh，总共 110%

.container
  height:110vh

堆栈闪电战

https://stackblitz.com/edit/angular-w1exhe?embed=1&file=src/app/app.component.css

【参考方案2】：

如果您想调整链接的 css，您可以在 a css 中添加类似的内容：

 max-height:60vh; (or use percentage instead of vh, but set a max-height)   
 overflow-y:auto;
 overflow-x:hidden;

希望这会有所帮助。

Example (I set your icon size to 35pt in this)

【讨论】：

我在“Operational/”图标的正斜杠后面放了一个空格，以便将文本换行到下一行。