在悬停时显示垫子图标[重复]

Posted 2023-03-06

【中文标题】在悬停时显示垫子图标[重复]

【英文标题】：Show mat-icon on hover [duplicate]

【发布时间】：2019-06-10 07:10:36

【问题描述】：

我的 html 模板中有 mat-list：

<mat-list *ngFor="let item of items">
  <mat-list-item><mat-icon>add</mat-icon>  item.title </mat-list-item>
</mat-list>

我只想在mat-list-item 悬停时显示mat-icon。所以我想出了这个css：

mat-icon 
  display: none;


mat-list-item:hover + mat-icon 
  display: block;

但由于某种原因它不起作用

但是，如果我确实尝试更改背景颜色，它是有效的：

mat-list-item:hover 
  background-color: #3f51b5;

这可能与mat-icon有关 想法？

【问题讨论】：

你试过 display: block !important 吗？

@BiswajitNath 刚刚做了，还是不行

@sreginogemoh 你为什么使用+ 符号。在此处使用子运算符 > 或删除 +。

:host::ng-deep mat-icon display:block !important .. 试试这个

默认 mat-icon 具有显示属性'inline-block'。可能您需要将其设置为悬停而不是显示“块”。问题可能是由于容器溢出：隐藏，所以当你使用“块”时，垫子图标会在前一个块下下降并且不可见。

【参考方案1】：

试试这个

mat-icon
  display: none;


mat-list-item:hover mat-icon
  display: block;

你不需要+ adjacent selectors

demo

【讨论】：

如何确保+ 在显示时不会将文本向右移动？

@sreginogemoh 使用visibility: hidden; 和visibility: visible; 保留加号图标的空间

【参考方案2】：

试试这个

  mat-icon 
      display: none;
    

    mat-list-item:hover > mat-icon 
      display: block;
    

【参考方案3】：

你可以在这里试试这个代码：

mat-icon
  display: none;


mat-list-item:hover mat-icon display: block; 

或

mat-list-item:hover > mat-icon display: block; 

您尝试了 item:hover + children 它不正确，因为 + 选择器是即时兄弟选择器，它不是选择子项。

我这里给出两个代码

mat-list-item:hover mat-icon display: block; 这意味着 ma​​t-list-item 类中的任何子级都选择此项。

另一方面 mat-list-item:hover > mat-icon display: block; 这意味着孩子，但它像 ul 一样选择直接孩子 > li 它选择直接孩子，而不是孩子孩子。

李>

这是 CSS 选择器的概念 您可以了解有关 CSS 选择器的更多信息：https://www.w3schools.com/cs-s-ref/css_selectors.asp 或https://www.w3schools.com/cs-s-ref/trysel.asp

谢谢