可点击离子卡内的离子图标不适用于浮动：对

Question

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

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

提前致谢

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;
}

Answer 1

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

除了指示元素不是指针事件的目标之外，值 none 指示指针事件转到 "through" 元素和目标 "underneath" 那个元素代替 .

/* 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;

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

可点击离子卡内的离子图标不适用于浮动：对

ion-icon inside clickable ion-card does not work with float: right

css

angular

ionic-framework

ionic5