Streaming live at 10am (PST)

Custom Code on MouseOver

What’s the easiest way to execute custom code for “onmouse” events? Webflow only offers animations via their interface.

I have a custom onMouseOver function, but I simply can’t figure out how to implement it. Each element that calls this function needs to pass individual parameters. If I did it by hand I’d simply do:

<dic class="XY" onmouseover="customFunction(11, 8,etc)"></div>

Any help would be appreciated!
Thanks in advance!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey Gandalf!

Can you provide your read-only link for me to view?

I have a couple ideas, but need to see specifically what kind of elements you are working with.

Hey Tyler,
I managed to get my custom code running for mouseover events with eventlisteners.
If anyone is interested, here’s my project specific solution.
This code goes in the custom code field.

const datablocks = document.querySelectorAll('[data-traits]');

// attach listeners for mouse events
for (i = 0; i < datablocks.length; i++) 
{
	datablocks[i].addEventListener("mouseleave", () => { clearTraits() } );
	datablocks[i].addEventListener("mouseenter", () => { 
		var traits = event.target.dataset.traits;
		showTraits(traits);
	} ); 
}

For the elements that trigger this code I setup a custom div field called “data-traits”.

1 Like