不幸的是，据我所知，不可能为overflow: hidden提供一个例外，因为父节点只对特定的子节点，所以你需要将按钮带到与父节点相同的级别，我使用了多个概念来让它工作，请通过代码，让我知道如果有任何疑问！
主ts

import { CommonModule } from '@angular/common';
import { Component, ElementRef, ViewChild } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import 'zone.js';
import { BoxComponent } from './box/box.component';
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [BoxComponent, CommonModule],
  template: `
    <div class="container">
        <div class="config-wrapper">
            <div class="config">
                <app-box *ngFor="let box of boxes;let index = index" (hover)="onHover($event, index)" (blur)="onBlur($event)"></app-box>
            </div>
        </div>
        <div class="button-wrapper" [hidden]="!showButtons" #buttons
  (mouseover)="onMouseOverButtons($event)" 
  (mouseout)="onMouseOutButtons($event)" [style.left]="position * 150 + 'px'">
          <button class="decrease-temp" (click)="removeBox()">-</button>
          <button class="increase-temp" (click)="addBox()">+</button>
        </div>
    </div>
    {{buttonsHover}} || {{position}}
  `,
  styles: [
    `
  .container {
  max-width: 600px;
  height: 352px;
  overflow: visible;
  position: relative;
}
.config-wrapper {
  display: flex;
  background-color: gray;
  overflow: hidden;
}
.config {
  position: relative;
  display: flex;
}
.button-wrapper {
  width: 150px;
  height:50px;
  position: absolute;
  z-index: 5;
  top:30px;
  left: 0px;
}
/* 
.box:hover button {
  visibility: visible;
} */
button {
  height: 30px;
  width: 30px;
  outline: none;
  border: none;
  background-color: thistle;
  border: 1px solid #000;
  z-index: 101;
  cursor: pointer;
}
button:hover {
  height: 30px;
  width: 30px;
  outline: none;
  border: none;
  background-color: rgb(253, 139, 253);
  border: 1px solid #000;
  z-index: 101;
}
.decrease-temp {
  position: absolute;
  top: 25px;
  left: -15px;
}
.increase-temp {
  position: absolute;
  top: 25px;
  left: 133px;
}
  `,
  ],
})
export class App {
  @ViewChild('buttons') buttons: ElementRef<any> | null = null;
  boxes = [1];
  showButtons = false;
  buttonsHover = false;
  position = 0;
  subject = new Subject<boolean>();
  ngOnInit() {
    this.subject.pipe(debounceTime(500)).subscribe((data: boolean) => {
      if (!this.buttonsHover) {
        this.showButtons = data;
      }
    });
  }
  onHover(event: Event, index: number) {
    console.log(event);
    this.position = index;
    //if (event.target)
    this.subject.next(true);
  }
  onBlur(event: Event) {
    console.log(event);
    this.subject.next(false);
  }
  onMouseOverButtons(event: Event) {
    console.log(event);
    //if (event.target)
    this.buttonsHover = true;
    this.subject.next(false);
  }
  onMouseOutButtons(event: Event) {
    console.log(event);
    this.buttonsHover = false;
    this.subject.next(false);
  }
  addBox() {
    this.boxes.push(this.boxes.length + 1);
  }
  removeBox() {
    this.boxes.pop();
  }
}
bootstrapApplication(App);

字符串
框html

<div class="box"></div>

型
Box CSS

.box {
  width: 150px;
  height: 350px;
  background-color: darkblue;
  border: 1px solid black;
  position: relative;
  z-index: 1;
}
.box:hover {
  z-index: 2;
}

型
箱ts

import { Component, Output, EventEmitter, HostListener } from '@angular/core';
@Component({
  standalone: true,
  selector: 'app-box',
  templateUrl: './box.component.html',
  styleUrls: ['./box.component.css'],
})
export class BoxComponent {
  @Output() hover = new EventEmitter<Event>();
  @Output() blur = new EventEmitter<Event>();
  @HostListener('mouseover', ['$event.target'])
  onHover(e: Event) {
    console.log('hover');
    this.hover.emit(e);
  }
  @HostListener('mouseout', ['$event.target'])
  onBlur(e: Event) {
    console.log('blur');
    this.blur.emit(e);
  }
}

型
stackblitz