1

我有一个ion-card可点击的 s 列表，其中包含一组图标，当您将鼠标悬停在它上面时会出现这些图标。我的问题是图标的浮动性质意味着它们实际上并不在它们看起来的位置（如下图所示），因此ion-card点击会将其覆盖。我已经知道我需要$event.stopPropagation()在那里，但这并不能解决它。

那么我的问题是：我如何能够单击ion-icons但不破坏过程中任何其他元素的位置？

提前致谢

浮动图标按钮不会显示在 Chrome Element 检查中

HTML

<ion-card *ngFor='let packet of packets; let i = index' (click)='mobile? presentActionSheet(packet): navToPacket(packet)'>
  <div id='card-icons'>
    <ion-icon (click)='editMeta(packet); $event.stopPropagation()' name="create-outline"></ion-icon>
    <ion-icon (click)='nav(["packet", packet.meta.computer.id, "stats"]); $event.stopPropagation()'
      name="bar-chart-outline">
    </ion-icon>
    <ion-icon (click)='presentMoreActionSheet(packet)' name="ellipsis-vertical"></ion-icon>
  </div>

  <ion-card-header>
    <ion-card-subtitle>Awesome Subtitle</ion-card-subtitle>
    <ion-card-title>Awesome Title</ion-card-title>
  </ion-card-header>
  <ion-card-content>
    Awesome content
  </ion-card-content>
</ion-card>

CSS

#card-icons {
  ion-icon {
    font-size: 30px;
    padding: 10px 5px;
  }
  visibility: hidden;
  float: right;
}
ion-card:hover #card-icons {
  visibility: visible;
}
4

1 回答 1

1

pointer-events CSS 属性设置特定图形元素在什么情况下（如果有）可以成为指针事件的目标。

除了指示该元素不是指针事件的目标之外，值 none 还指示指针事件“通过”该元素并以该元素“下方”的任何内容为目标。

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted;
pointer-events: visibleFill;
pointer-events: visibleStroke;
pointer-events: visible;
pointer-events: painted;
pointer-events: fill;
pointer-events: stroke;
pointer-events: all;

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;
于 2020-04-04T08:50:33.977 回答