Question

我有循环显示我的所有产品在页面..现在我想当用户在产品上盘旋它的相关细节显示在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中执行此操作：

在您的产品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 }

Answer 2

我已经创建了一个指令，可以在悬停时将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

角度5 - 显示div中的产品细节，当鼠标悬停在产品上时有效

2 个答案: