Наведите DIV с NgClass - PullRequest
Новая
       6

Наведите DIV с NgClass

0 голосов
/ 21 февраля 2019

Я пытаюсь создать эффект наведения на элемент div с помощью директивы Angular ngClass.В файле шаблона у меня есть элемент div с классом «list-item-container», который содержит div с классом «list-item», который повторяется с директивой * ngFor. Внутри элемента div «list-item» у меня есть триdiv с классом "list-item-column", которые расположены горизонтально как строка таблицы с встроенным отображением. в div с классом "list-item" я поместил слушатели событий mouseenter и mouseleave, которые вызывают hoverListItem () в моем .tsfile. Функция hoverListItem () изменяет значение переменной listItemHovered на true или false. В классе «list-item» у меня есть директива ngClass, которая запускает класс css 'list-item-highlight' на основе значения логического значения listItemHovered.значение, которое затем изменяется на фон другого цвета.

Проблема, с которой я сталкиваюсь, заключается в том, что при наведении курсора мыши на элемент "list-item" затрагиваются все мои элементы div "list-item" вместоодин, над которым я нахожусь. Как решить эту проблему?

.html file 

<div class="list-item-container">
      <ng-container *ngFor="let opportunity of dealService.opportunities">
        <div [ngClass]="{'list-item-highlight': listItemHovered}" class="list-item" (mouseenter)="hoverListItem()"
             (mouseleave)="hoverListItem()"
             (click)="selectOpportunity(opportunity)">
          <div
            class="list-item-column">{{opportunity.account?.name === null ? "N/A" : opportunity.account.name}}</div>
          <div class="list-item-column">{{opportunity.requirementTitle}}</div>
          <div class="list-item-column">{{opportunity.salesValue | number: '1.0-2'}}</div>
        </div>
      </ng-container>
    </div>

.css file 

.list-item-container{
  overflow: auto;
  width: 100%;
  max-height: 500px;
}
.list-item{
  font-size: 15px;
  border-radius: 10px ;
  margin-top: 5px;
  height: 50px;
  background: lightgray;
  color: black;
}

.list-item-highlight{
  background: #7e00cc;
  color: white;
}

.list-item-column{
  height: inherit;
  vertical-align: center;
  display: inline-block;
  width: 33.33%;
  padding-left: 40px;
}

.ts file 

 hoverListItem() {
    this.listItemHovered = !this.listItemHovered;
  }

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

Я бы предложил использовать directive для прослушивания события наведения на целевом элементе и присоединить класс: 

@Directive({
    selector: '[hoverDir]'
})


 export class HoverOverDirective { 
    @HostListener('mouseenter') onMouseEnter() {
       this.elementRef.nativeElement.class = 'list-item-highlight';
    }

     @HostListener('mouseleave') onMouseLeave() {
       this.elementRef.nativeElement.class = 'list-item-not-highlight';
     }
}

Или самый простой способ - использовать псевдо-свойство CSS :hover и используйте его, как показано ниже: 

.list-item:hover {
  background: #7e00cc;
  color: white;
}
0 голосов
/ 21 февраля 2019

Прямо сейчас вы создаете и изменяете флаг listItemHovered внутри контекста компонента, скорее вы должны поддерживать флаг для каждого уровня элемента, который может помочь легко определить, был ли компонент выделен или нет. 

[ngClass]="{'list-item-highlight': opportunity.listItemHovered}"
(mouseenter)="hoverListItem(opportunity)"
(mouseleave)="hoverListItem(opportunity)"

Компонент 

hoverListItem(opportunity) {
   opportunity.listItemHovered = !opportunity.listItemHovered;
}

Хотя я бы рекомендовал использовать псевдокласс :hover, если требуется просто выделить элемент при наведении курсора.Это можно легко сделать, изменив правило CSS.Этот способ может сохранить несколько циклов обнаружения изменений для запуска. 

.list-item:hover {
  background: #7e00cc;
  color: white;
}
...