打开Material菜单时如何保持图片的悬停缩放样式

问题原因 #

浏览器触发右键菜单后，图片的:hover伪类会因焦点转移或事件处理逻辑丢失状态，导致缩放效果消失。我们可以通过手动控制CSS类的方式替代伪类，维持缩放状态。

1. 修改CSS样式 #

将依赖:hover伪类的缩放效果，替换为自定义类控制：

.image {
  transform: scale(1, 1);
  transition: transform 0.2s ease-in;
}

/* 用自定义类替代hover伪类 */
.image.image--zoomed {
  transform: scale(1.05, 1.05);
}

2. 更新模板代码 #

给图片添加鼠标进入/离开事件，并绑定自定义类：

<image class="image" 
       [class.image--zoomed]="isImageZoomed"
       (contextmenu)="onContextMenu($event)" 
       (mouseenter)="onImageMouseEnter()"
       (mouseleave)="onImageMouseLeave()"
       href="assets/images/USER.png" 
       width="150" height="135" 
       image-rendering="optimizeQuality" 
       preserveAspectRatio="none" />
    
<div
  id="contextMenu"
  style="visibility: hidden; position: fixed"
  [style.left]="contextMenuPosition.x"
  [style.top]="contextMenuPosition.y"
  [matMenuTriggerFor]="contextMenu"
></div>

<mat-menu #contextMenu="matMenu">
  <ng-template matMenuContent let-item="item">
    <button mat-menu-item (click)="onContextMenuAction1(item)">Action 1</button>
    <button mat-menu-item (click)="onContextMenuAction2(item)">Action 2</button>
  </ng-template>
</mat-menu>

3. 调整TS逻辑 #

添加状态变量控制缩放类，处理鼠标事件和菜单关闭后的状态：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatMenuTrigger } from '@angular/material/menu';

@Component({
  // 保留原组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChild(MatMenuTrigger)
  contextMenu: MatMenuTrigger;

  contextMenuPosition = { x: '0px', y: '0px' };
  isImageZoomed = false; // 控制缩放状态的变量

  ngOnInit() {}

  ngAfterViewInit() {
    // 监听菜单关闭事件，处理缩放状态
    this.contextMenu.menuClosed.subscribe(() => {
      const imageElement = document.querySelector('.image');
      // 菜单关闭后，如果鼠标不在图片上，取消缩放
      if (imageElement && !imageElement.matches(':hover')) {
        this.isImageZoomed = false;
      }
    });
  }

  onImageMouseEnter() {
    this.isImageZoomed = true;
  }

  onImageMouseLeave() {
    // 只有菜单未打开时，才取消缩放
    if (!this.contextMenu.menuOpen) {
      this.isImageZoomed = false;
    }
  }

  onContextMenu(event: MouseEvent, item?: Item) {
    event.preventDefault();
    this.isImageZoomed = true; // 右键点击时强制激活缩放
    this.contextMenuPosition.x = event.clientX + 'px';
    this.contextMenuPosition.y = event.clientY + 'px';
    this.contextMenu.menuData = { item: item };
    this.contextMenu.menu.focusFirstItem('mouse');
    this.contextMenu.openMenu();
  }

  onContextMenuAction1(item: Item) {
    alert(`Click on Action 1 for ${item.name}`);
  }

  onContextMenuAction2(item: Item) {
    alert(`Click on Action 2 for ${item.name}`);
  }
}

export interface Item {
  id: number;
  name: string;
}

原理说明 #

• 用isImageZoomed变量手动控制缩放类的添加/移除，替代浏览器自动管理的:hover伪类，避免右键菜单触发时丢失状态。
• 鼠标进入图片时激活缩放，离开时仅在菜单未打开的情况下取消缩放。
• 菜单关闭后检查鼠标是否仍在图片上，决定是否保持缩放状态，确保交互逻辑连贯。

内容的提问来源于stack exchange，提问作者Cr7