用 NgClass 悬停一个 div

Posted 2023-02-22

【中文标题】用 NgClass 悬停一个 div

【英文标题】：Hover a div with NgClass

【发布时间】：2019-07-15 18:45:38

【问题描述】：

我正在尝试使用 Angular ngClass 指令在 div 上制作悬停效果。在模板文件中，我有一个带有“list-item-container”类的 div 元素，其中包含一个带有“list-item”类的 div，它使用 *ngFor 指令进行迭代。在“list-item”div 元素中，我有三个具有“list-item-column”类的 div，它们像具有内联显示的表格行一样水平放置。在具有“list-item”类的 div 中，我放置了一个 mouseenter 和 mouseleave 事件侦听器，它们在我的 .ts 中调用 hoverListItem()文件。hoverListItem() 函数将 listItemHovered 变量的值更改为 true 或 false。在“list-item”类中，我有一个 ngClass 指令，它根据 listItemHovered 布尔值的值触发 css 类“list-item-highlight”然后将背景更改为不同颜色的值。

我面临的问题是，将鼠标指针悬停在“列表项”div 上时，我的所有“列表项”div 都会受到影响，而不是我悬停的那个。如何解决这个问题？

.html 文件

<div class="list-item-container">
      <ng-container *ngFor="let opportunity of dealService.opportunities">
        <div [ngClass]="'list-item-highlight': listItemHovered" class="list-item" (mouseenter)="hoverListItem()"
             (mouseleave)="hoverListItem()"
             (click)="selectOpportunity(opportunity)">
          <div
            class="list-item-column">opportunity.account?.name === null ? "N/A" : opportunity.account.name</div>
          <div class="list-item-column">opportunity.requirementTitle</div>
          <div class="list-item-column">opportunity.salesValue | number: '1.0-2'</div>
        </div>
      </ng-container>
    </div>

.css 文件

.list-item-container
  overflow: auto;
  width: 100%;
  max-height: 500px;

.list-item
  font-size: 15px;
  border-radius: 10px ;
  margin-top: 5px;
  height: 50px;
  background: lightgray;
  color: black;


.list-item-highlight
  background: #7e00cc;
  color: white;


.list-item-column
  height: inherit;
  vertical-align: center;
  display: inline-block;
  width: 33.33%;
  padding-left: 40px;

.ts 文件

 hoverListItem() 
    this.listItemHovered = !this.listItemHovered;
  

【参考方案1】：

现在您正在组件上下文中创建和修改listItemHovered 标志，而不是您应该为每个项目级别维护一个标志，这有助于轻松识别组件是否已突出显示。

[ngClass]="'list-item-highlight': opportunity.listItemHovered"
(mouseenter)="hoverListItem(opportunity)"
(mouseleave)="hoverListItem(opportunity)"

组件

hoverListItem(opportunity) 
   opportunity.listItemHovered = !opportunity.listItemHovered;

---

虽然我建议使用:hover 伪类，如果要求只是在悬停时突出显示元素。这可以通过更改 CSS 规则轻松实现。这种方式可以节省几个要运行的更改检测周期。

.list-item:hover 
  background: #7e00cc;
  color: white;

【讨论】：

对不起，在 .ts 文件中我收到错误“property listItemHovered” does not exist on type Deal”（机会类型是 Deal）。此外，我曾尝试过 .list-iitem: hover before . 问题是它只适用于子 div (list-item-column). 只有我悬停的子 div 项才会突出显示而不是整个行/列表项 div

@Econ_newbie 对于足够的打字稿，在Deal 接口中添加listItemHovered 属性

@Econ_newbie for :hover 我认为:hover 不会有任何问题

现在 :hover 正在工作。我不知道为什么它以前不起作用。也许我的代码有问题。谢谢你的回答。

【参考方案2】：

我建议使用directive 来监听目标元素上的悬停事件并附加类：

@Directive(
    selector: '[hoverDir]'
)


 export class HoverOverDirective  
    @HostListener('mouseenter') onMouseEnter() 
       this.elementRef.nativeElement.class = 'list-item-highlight';
    

     @HostListener('mouseleave') onMouseLeave() 
       this.elementRef.nativeElement.class = 'list-item-not-highlight';
     

或者最简单的方法是使用CSS pseudo property :hover 并使用如下：

.list-item:hover 
  background: #7e00cc;
  color: white;
  

【讨论】：

感谢您的回答。谢天谢地 :hover 现在正在工作。我不知道为什么它以前不起作用。也许我的代码有问题。