Наведите DIV с NgClass

60
5

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

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

HTML файл

<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

.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

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

спросил(а) 2019-02-21T21:42:00+03:00 1 год назад
1
Решение
60

Прямо сейчас вы создаете и модифицируете флаг 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;
}

ответил(а) 2019-02-21T21:44:00+03:00 1 год назад
50

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

@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;
}

ответил(а) 2019-02-21T21:52:00+03:00 1 год назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема