Question

当我在示例网站中获取搜索结果时，我必须在悬停时显示图像和文本

我尝试使用css hover属性，在该属性中将相关类添加到了scss文件中的hover中。

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

希望在结果悬停时看到文本“ Email”和“ icon-font-icon_Mail”，但实际输出是我在所有搜索结果中都看到了“ Email”和“ Icon”。 / p>

Answer 1

这可以通过将鼠标进入和离开事件侦听器添加为以下方式来实现：

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>

TS代码

extResults;
isHovering = false;

 mouseHovering(index:any) {
   this.extResults[index].isHovering = true; 
 }
 mouseLeft(index:any) {
     this.extResults[index].isHovering = false;
 }

希望这会有所帮助

Answer 2

如果您可以为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>

通过将其添加到每个元素中，您可以确保仅该元素的状态会更改。

Answer 3

您可以使用ng-mouseover和ng-show之类的角度指令。

这是所需行为link

的示例

在搜索结果中悬停显示文本和图像

3 个答案: