Aurelia 翻转图像 show/hide

Question

您能否根据用户将鼠标悬停在 href 上来更改图像的 .js (aurelia) 中的 show/hide？我想我需要向 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>

Answer 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 方法。

Aurelia 翻转图像 show/hide

Aurelia rollover image show/hide

rollover

image

aurelia