角度 5 - 在 div 中显示产品详细信息，当鼠标悬停在产品上时生效

Question

我有 for 循环在页面中显示我的所有产品..现在我希望当用户将鼠标悬停在产品上时，它的相关详细信息显示在 div 中，效果我确实喜欢这样做，但我认为这不是正确的方式，不透明度也不起作用我的代码。

...我的目的是细节（在我的代码 div 中带有 calas "c-reveal"）应该在鼠标进入产品时有效显示，当用户离开细节或父母时细节将消失

  <ul class="home-product">
      <li *ngFor="let product of products; let i = index " [attr.data-index]="i" (mouseenter)="show($event)"
          (mouseleave)="leavep($event)">

        <div class="card product-card">

          <div class="card-content">
           {{ product.title }}
          </div>


          <div class="c-reveal" (mouseleave)="leave($event)">
            this will show when parent hoverd
          </div>

        </div>
      </li>
    </ul>

css:

.c-reveal {
  position: absolute;
  background: white;
  z-index: 3;
  margin-left: 247px;
  bottom: 155px;
  width: 225px;
  display: none;
  opacity: 0;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 2px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  transition: all 1s ease-in-out;

}

.show{
  opacity: 1;
  display: block;

}

component.ts:

  show(e) {

    let card = e.srcElement.children[0].children[2];
    card.classList.add('show');


  }

  leavep(e) {
    console.log(e);
    let card = e.srcElement.children[0].children[2];
    card.classList.remove('show');
  }

  leave(e) {
    let target = e.target;
    target.classList.remove('show');
  }

Answer 1

我创建了一个指令，在悬停时将 css 类添加到另一个 html 元素。看看这个：

import { Directive, Input, HostListener, Renderer2 } from '@angular/core';

@Directive({
  selector: '[hover]',
})
export class HoverDirective  {
  @Input() el: HTMLElement;
  @Input() activeClass: string;

  @HostListener('mouseenter') onMouseenter() {
    this.renderer.addClass(this.el, this.activeClass);
  }

  @HostListener('mouseleave') onMouseleave() {
    this.renderer.removeClass(this.el, this.activeClass);
  }

  constructor(private renderer: Renderer2) {}
}

用法

<p hover activeClass="active" [el]="anotherEl">
  Hover over me to add class to another element
</p>

<div #anotherEl>Another element</div>

Live demo

Answer 2

您可以直接在 css 中执行此操作：

在您的产品 div 上添加一个类，例如 product

<li *ngFor="let product of products; let i = index " [attr.data-index]="i" class="product">

然后就做

.product:hover .c-reveal { display: block; opacity: 1 }