提问人：Clare Barrington 提问时间：12/9/2015 最后编辑：Clare Barrington 更新时间：12/10/2015 访问量：3238
Aurelia 翻转图像显示/隐藏
Aurelia rollover image show/hide
问：
您可以根据用户将鼠标悬停在 href 上来更改图像.js （aurelia） 内的显示/隐藏吗？我想我需要向 Bind（） 或 Activate（） 添加一些东西。
像这样：
activate(){
$( "a" ).hover(
///find non rollover image and hide
///find rollover image and show
);
//else
///find non rollover image and show
///find rollover image and hide
}
我实际上不知道从哪里开始：-/，任何帮助都会很棒：-）
<div class="row">
<div class="col-sm-6">
<a target="blank" href.bind="baseContent.LinkDestination">
<img class="header-splash" src.bind="baseContent.SplashImage" class="image-block-file-image" />
<img class="header-splash-hover" src.bind="baseContent.SplashHoverImage" class="image-block-file-image" />
</a>
</div>
</div>
答：
10赞
Mikhail Shilkov
12/10/2015
#1
将图像的源以及鼠标悬停和鼠标输出事件绑定到 ViewModel：
<img mouseover.delegate="domouseover()" mouseout.delegate="domouseout()"
src.bind="imageUrl" />
在视图模型中创建一个属性，并在事件处理程序中更改它：
imageUrl = URL1;
domouseover() {
this.imageUrl = URL2;
}
domouseout() {
this.imageUrl = URL1;
}
我不确定您是否可以直接绑定到图像的鼠标悬停状态。
一般而言：我认为将jQuery代码与aurelia混合是一个坏主意。尝试为您的问题寻找一种惯用的 aurelia 方式。
评论
0赞
Clare Barrington
12/10/2015
谢谢米哈伊尔，我看一看
评论