javascript - 处理单击并悬停在同一元素上并保持弹出模式打开直到弹出模式悬停在上面

问题描述

我已经在一个元素上实现了单击和悬停功能，从以前的答案我已经解决了相对于鼠标指针的弹出位置。
但是现在我想在悬停在悬停元素旁边的垂直中间时修复弹出模式位置。

当我将鼠标悬停在元素上时，弹出模式开始闪烁，当我以某种方式单击元素内的其他位置时，模式最终打开。

点击

要在单击时全屏显示弹出模式（这个东西可以工作但不是以正确的方式，闪烁的东西）+当弹出模式被悬停时，它应该保持打开状态。
一旦弹出模式打开，弹出模式只能在模式之外的任何地方发生点击时关闭

悬停

为了在悬停元素的侧面显示垂直居中固定的弹出模式（这个东西也有效，但定位不正确）+当弹出模式悬停时，它应该保持打开状态。
在这种情况下，一旦鼠标离开元素或弹出模式，弹出模式应该关闭。

最小可重现示例

https://stackblitz.com/edit/angular-yybbgm?file=src/app/app.component.html

app.component.html

<div class="box"
  (mouseenter)="addClickEvent($event)"
  (mouseleave)="addClickEvent($event)"
  (mousemove)="addClickEvent($event)"
  (click)="addClickEvent($event)">
</div>

<fs-modal *ngIf="modalShow"
           [ngStyle]="{'top.px': (zoneIsClicked ? 0 : modaltop) ,
                   'left.px':(zoneIsClicked ? 0 : modalleft)}"
           [ngClass]="zoneIsClicked ? 'zoneClicked' : 'zoneNotClicked'">
</fs-modal>

应用程序组件

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
name = 'Angular';

modalShow = false;
modalleft;
modaltop;
zoneIsClicked;

addClickEvent(e) {
 if(e.type === 'click'){
  this.modalShow = true;
  this.zoneIsClicked = true;
 }
/*else if (e.type === 'mousemove') {
  this.modalleft = e.clientX
  this.modaltop = e.clientY
}*/
else if (e.type === 'mouseenter') {
  this.modalShow = true;
  this.zoneIsClicked = false;
  this.modalleft = e.clientX
  this.modaltop = e.clientY
}
else if (e.type === 'mouseleave') {
  this.modalShow = false;
}
}

}

app.component.css

.box{
width: 100px;       
height: 100px;      
background: rgba(254, 249, 247, 1);     
border: 1.5px solid #e24301;        
margin: 50px;       
font-size: 0.8rem;
position: absolute; 
}

.zoneClicked{
 display: block;
 position: absolute;
 width: 900px;
}

.zoneNotClicked{
position: absolute;
width: 50%;
}

fsmodal.component

import { Component, Input } from '@angular/core';

@Component({
  selector: 'fs-modal',
  template: `<div [ngStyle]="{'border':'1px solid black'}">ok</div>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class fsModalComponent  {
}

标签： javascripthtmlcssangularmouseevent

javascript - 处理单击并悬停在同一元素上并保持弹出模式打开直到弹出模式悬停在上面

问题描述

解决方案

推荐阅读