Показывать текст и изображение при наведении в результатах поиска
Мне нужно показать изображение и текст при наведении, когда я получаю результаты поиска на своем тестовом веб-сайте.
Я попытался использовать свойство css hover, где я добавил связанный класс внутри hover в файле scss.
<div class = "search-results" *ngFor = "let user of extResults">
<div>{{ user.user }}</div>
<div class = "ext">
<span class = "icon-phone icon-font-icon_Phone"></span>{{ user.ext }}
<a [href] = "'mailto:' + user.email" class = "anchor"
><span class = "icon-email icon-font-icon_Mail name"></span>
<span class = "email-text">Email</span></a
>
</div>
</div>
.search-results {
color: #424242;
font-size: 14px;
padding: 10px;
padding-left: 10px;
&:hover {
background-color: rgba(#d8d8d8, 0.26);
}
.ext {
color: #979797;
font-size: 12px;
font-family: colfax-medium;
}
.icon-phone {
font-size: 10px;
padding-top: 4px;
padding-right: 3px;
&:before {
color: #d9415c;
}
}
.anchor {
float: right;
text-decoration: none;
}
.icon-email {
font-size: 13px;
padding-top: 4px;
padding-right: 3px;
&:before {
color: #d9415c;
}
}
.email-text {
margin-right: 10px;
font-size: 14px;
color: #d9415c;
}
}
Ожидается увидеть текст «Электронная почта» и «icon-font-icon_Mail» при наведении курсора на результаты, но на самом деле я вижу «Электронную почту» и «Значок» во всех результатах поиска.
Нет, я хочу добавить текст «Электронная почта» и «Значок» при наведении, как показано на изображении.
Ответы 3
Этого можно добиться, добавив прослушиватели событий входа и выхода с помощью мыши:
HTML-код
<div class = "search-results" *ngFor = "let user of extResults;let i = index;">
<div (mouseenter) = "mouseHovering(i)" (mouseleave) = "mouseLeft(i)">
<div>{{ user.user }}</div>
<div class = "ext">
<span class = "icon-phone icon-font-icon_Phone"></span>{{ user.ext }}
<div *ngIf = "user.isHovering">
<a [href] = "'mailto:' + user.email" class = "anchor"
><span class = "icon-email icon-font-icon_Mail name"></span>
<span class = "email-text">Email</span></a>
</div>
</div>
</div>
</div>
Код ТС
extResults;
isHovering = false;
mouseHovering(index:any) {
this.extResults[index].isHovering = true;
}
mouseLeft(index:any) {
this.extResults[index].isHovering = false;
}
Надеюсь, это поможет
при наведении на один элемент все элементы показывают "Электронную почту" и "Значок"
Затем добавьте еще один div после ngFor div и добавьте событие во вновь добавленный div. Я редактировал свою проверку ответов один раз
Можете ли вы добавить это на stackblitz? решит это
проверьте, решена ли эта проблема: stackblitz.com/edit/angular-k5gbtn?embed=1 также отредактировал мой ответ
Большое спасибо .. очень ценю ваши усилия
Вы можете использовать угловые директивы, такие как ng-mouseover и ng-show.
Вот пример желаемого поведения ссылка на сайт
Не могли бы вы помочь мне сделать то же самое в Angular 4?
Для Angular 2+ вместо этого вы можете использовать наведение мыши. Чтобы это работало, у вас должны быть как on-mouseover, так и on-mouseleave.
Если вы можете добавить свойство (сейчас назовем его isHovered) к каждому элементу вашего extResults, это довольно просто.
<div class = "search-results" *ngFor = "let user of extResults" (mouseenter) = "user.isHovered = true" (mouseleave) = "user.isHovered = false">
<div>{{ user.user }}</div>
<div class = "ext">
<span class = "icon-phone icon-font-icon_Phone"></span>{{ user.ext }}
<a *ngIf = "user.isHovered" [href] = "'mailto:' + user.email" class = "anchor">
<span class = "icon-email icon-font-icon_Mail name"></span>
<span class = "email-text">Email</span>
</a>
</div>
</div>
Добавляя его к каждому элементу, вы гарантируете, что изменится состояние только этого элемента.
ваш вопрос не ясен. если вы хотите изменить класс при наведении, просто добавьте свой класс при наведении, например. .normalClass {цвет фона: #fff;} .nomralClass:hover {цвет фона: #000;}