如何使用Angular改变图像src的悬停

我想用鼠标在事件上改变src值。我们如何在angular 4或更高版本中做到这一点?请帮帮我。

<li class="ci-inline-flex ci-flt-l width100 tooltip ci-cursor" *ngFor="let menu of menuData;let i=index" [ngClass]="{'ci-bgclr-18 ci-border-radius-5': selectedItem == i, 'disabled': disabledVal == i, 'disabled': headerdisplay == false && menu.menuName == 'Encounter'}" (click)="reDirectTo(menu.route,menu.routeTyPe, menu.menuName,i)" (mouseover)='over(i)' (mouseout)='out(i)'>
<div class=" ci-pb-5">
<div class="ci-pl-20 ci-pr-20" [ngClass]="menuList ? 'ci-pt-10' : ''">
<div [hidden]="selectedItem == i"><img src="{{menu.icon}}"/></div>
<div [hidden]="selectedItem != i"><img src="{{menu.activeIcon}}" /></div>
<div [hidden]="menuName == 'Encounter' && menuName == 'Clinical Trials' && menuName !== 'Case Summary'" class="ci-position-absolute" 
style="top:-3%; left: 63%;"><img src="{{menu.betaIcon}}" />
</div>
</div>
<p [ngClass]="menuList ? 'menutext' : ''" [hidden]="selectedItem == i" class="menuname_inactive">{{menu.menuText}}</p>
<p [ngClass]="menuList ? 'menutext' : ''" [hidden]="selectedItem != i" class="menuname_active" >{{menu.menuText}}</p>
</div>                  
<p *ngIf="menuList" [ngClass]="{'ci-clr-1': selectedItem == i}" class="ci-sec-head ci-pt-15 ci-pb-15 ci-pl-20 ci-pr-20">{{menu.menuName}}</p>
<span *ngIf="tooltipView" class="ci-sec-head tooltiptext">{{menu.menuName}}</span>
</li>

这是我的json从。ts文件。

{ "icon": '../assets/icons-set/menu-icons/casesummary_normal.svg', "activeIcon": '../assets/icons-set/menu-icons/casesummary_active.svg', "menuName": 'Case Summary', "route": "/app/tabs/(patientcasesummary:patientcasesummary)", "routeTyPe": "", "menuText": 'Case Summary' }

使用mouseover()和mouseout()事件<img>像

<img [src]="myImgSrc" (mouseover)="myImgSrc = menuData.activeIcon (mouseout)="myImgSrc = menuData.icon"/>

try this

<img [src]="imgSrc" (mouseover)="imgSrc = menuData.activeIcon" (mouseout)="imgSrc = menuData.icon">
注意:不要忘记在组件中初始化imgSrc变量

用下面的代码为我工作。使用(mouseout)="menu.src = ''"。并在.ts文件中添加"src":""。

<li style="margin-bottom: 3px;" class="ci-inline-flex ci-flt-l width100 tooltip ci-cursor" *ngFor="let menu of menuData;let i=index" [ngClass]="{'ci-bgclr-18 ci-border-radius-5': selectedItem == i, 'disabled': disabledVal == i, 'disabled': headerdisplay == false && menu.menuName == 'Encounter'}" (click)="reDirectTo(menu.route,menu.routeTyPe, menu.menuName,i,$event)" (mouseover)="menu.src = menu.activeIcon" (mouseout)="menu.src = ''"> <div class=" ci-pb-5"> <div class="ci-pl-20 ci-pr-20" [ngClass]="menuList ? 'ci-pt-10' : ''"> <div [hidden]="selectedItem == i"><img [src]="menu.src || menu.icon"/></div> <div [hidden]="selectedItem != i"><img [src]="menu.src || menu.activeIcon"/></div> <div [hidden]="menuName == 'Encounter' && menuName == 'Clinical Trials' && menuName !== 'Case Summary'" class="ci-position-absolute" style="top:-3%; left: 63%;"><img src="{{menu.betaIcon}}" /> </div> </div> <p [ngClass]="menuList ? 'menutext' : ''" [hidden]="selectedItem == i" class="menuname_inactive">{{menu.menuText}}</p> <p [ngClass]="menuList ? 'menutext' : ''" [hidden]="selectedItem != i" class="menuname_active" >{{menu.menuText}}</p> </div> <p *ngIf="menuList" [ngClass]="{'ci-clr-1': selectedItem == i}" class="ci-sec-head ci-pt-15 ci-pb-15 ci-pl-20 ci-pr-20">{{menu.menuName}}</p> <span *ngIf="tooltipView" class="ci-sec-head tooltiptext">{{menu.menuName}}</span> </li>
TS
Here is my json from .ts file. public menuData: any = [ { "icon": '../assets/icons-set/menu-icons/casesummary_normal.svg', "activeIcon": '../assets/icons-set/menu-icons/casesummary_active.svg', "menuName": 'Case Summary', "route": "/app/tabs/(patientcasesummary:patientcasesummary)", "routeTyPe": "", "menuText": 'Case Summary', "src":"" } ]

相关内容

最新更新

热门标签：