gpt4 book ai didi

image - Aurelia 翻转图像显示/隐藏

转载 作者:行者123 更新时间:2023-12-01 09:53:00 34 4
gpt4 key购买 nike

您能否根据用户将鼠标悬停在 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>

最佳答案

将图像的源和 mouseover 和 mouseout 事件绑定(bind)到 ViewModel:

<img mouseover.delegate="domouseover()" mouseout.delegate="domouseout()" 
src.bind="imageUrl" />

在您的 View 模型中创建一个属性并在事件处理程序中更改它:

imageUrl = URL1;

domouseover() {
this.imageUrl = URL2;
}

domouseout() {
this.imageUrl = URL1;
}

我不确定您是否可以直接绑定(bind)到图像的鼠标悬停状态。

作为一般说明:我认为将 jQuery 代码与 aurelia 混合是一个坏主意。尝试为您的问题寻找一种惯用的 aurelia 方法。

关于image - Aurelia 翻转图像显示/隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34182552/

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com