Aurelia rollover image show/hide

Question

Can you change the show/hide within an .js (aurelia) of an image based on a the user hovering over an href? I think I need to add something to the Bind() or Activate().

Something like:

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
}

I don't actually know where to begin :-/, any help would be great :-)

<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

Bind your image's source and mouseover and mouseout events to ViewModel:

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

Make a property in your view model and change it in event handlers:

imageUrl = URL1;

domouseover() {
  this.imageUrl = URL2;
}

domouseout() {
  this.imageUrl = URL1;
}

I'm not sure if you can bind directly to mouse over state of the image.

As a general note: I think mixing jQuery code with aurelia is a bad idea. Try searching for an idiomatic aurelia way for your problems.