Это мой демо.
Когда мы наведем #image-bg
, я хочу #bg-box-hidden
будет display: block
.
Но я сбиваюсь с пути, чтобы понять, как решить проблему
<div class = "grid pb1rem">
<div *ngIf = "avatar !== null" class = "image-content">
<img
class = "image-bg"
[src] = "avatar"
(click) = "selectImage.click()"
hover-class = "test"
(mouseover) = "onImgMouseover($event)"
(mouseout) = "onImgMouseout($event)"
/>
<div #show class = "bg-box-hidden" hover-class = "show">
<button class = "btn only-icon">
<i nz-icon nzType = "delete" nzTheme = "outline"></i>
</button>
</div>
</div>
</div>
Основная проблема вашего кода
Вот простое решение для вас, это может быть и другой способ реализации.
Попробуйте этот, наденьте свой .ts
файл компонента.
onImgMouseover($event): void {
const box = document.getElementsByClassName('bg-box-hidden')[0];
box.style.display = 'block';
}
onImgMouseout($event): void {
const box = document.getElementsByClassName('bg-box-hidden')[0];
box.style.display = 'none';
}
и нужно изменить некоторые HTML
что-то вроде
<div
class = "grid pb1rem"
(mouseenter) = "onImgMouseover($event)"
(mouseleave) = "onImgMouseout($event)"
>
<div *ngIf = "avatar === null" class = "image_wrapper">
<input
type = "file"
accept = ".png,.jpg"
(change) = "updateImage($event)"
class = "file-input"
#selectImage
/>
</div>
<div *ngIf = "avatar !== null" class = "image-content">
<img
class = "image-bg"
[src] = "avatar"
(click) = "selectImage.click()"
hover-class = "test"
/>
</div>
<div #show class = "bg-box-hidden" hover-class = "show">
<button class = "btn only-icon">
<i nz-icon nzType = "delete" nzTheme = "outline"></i>
</button>
<div class = "box-button-up">
<input
type = "file"
accept = ".png,.jpg"
(change) = "updateImage($event)"
class = "file-input"
#selectImage
/>
</div>
</div>
</div>