Как показать другой элемент при наведении в Angular?

Это мой демо.

Когда мы наведем #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>
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
Поговорим о глассморфизме (Glassmorphism)
Поговорим о глассморфизме (Glassmorphism)
В 2021 году Glassmorphism был огромным трендом в веб-дизайне. Я всегда люблю размытость в UI / UX, она делает пользовательский интерфейс более богатым...
1
0
22
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Основная проблема вашего кода

  1. Неверное название мероприятия.
  2. Элемент не отображается, поэтому вы не можете настроить таргетинг на элемент.

Вот простое решение для вас, это может быть и другой способ реализации.

Попробуйте этот, наденьте свой .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>

Другие вопросы по теме