Как показать другой элемент при наведении в 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>
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
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>

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