Mouse In/Out on page load

Ask the community
,
1

I have multiple coloured boxes over large images, set to appear/hide on mouse in/out as a visual navigation. This works well so far.
The slight issue is when the page loads, if the mouse is already over an image it will not register the hover effect until moving entirely off the image and onto it again. Is there any way of adding an additional code to also account for the current mouse position?

2

Hey, Suraj.

You can add the relevant event handlers into the onReady() function. This way, even if the mouse is already over an image when the page loads, the event will fire as soon as the mouse moves (there will be no need to move entirely off the image and back).

For example:

$w.onReady(function () {
   $w("#image1").onMouseIn((event) => {
       $w("#box1").show();
   });
});
3

Hi Anastasiia
Thanks, this was what I was hoping for - though I’ve tried your example code exactly (replacing image/boxes) yet the result is still the same, requiring moving entirely off the image. Is there something extra I’m missing?

4

@surajmak2809
Try changing the page onReady function to this and see what happens.

$w.onReady( () => {

Another option would be to have all the needed elements set to show in the pages onReady function, so that they will be shown without needing to have to the mouse moved for something to work when the page first loads.

$w.onReady( () => {
$w("#box1").show();
$w("#box2").show();
$w("#box3").show();
)};

 // rest of code...//

Then you can simply have your onMouseIn and onMouseOut functions setup as normal with your images and boxes etc.