Is there a way to trigger the mouseover event on every element currently under the cursor?

In my web application, I have a feature where a dot is created every time you click. However, when hovering over a stack of dots, only the top dot triggers the mouseover or mouseenter event. How can I ensure that the events fire for every dot under the cursor, but not those outside it? (BEGIN EDIT) Also, I want the mouseout or mouseleave event to only be triggered when the cursor actually leaves the dot. (END EDIT)

Just to provide context, the black portion in the image represents an SVG, and all the dots are SVG circles. They are siblings within the SVG element.

https://i.sstatic.net/3tzl7.jpg

Appreciate any help on this matter! Thank you!

javascriptjqueryhtmlcsssvg

Answer №1

To start, once you've located the first dot, adjust its CSS "pointer-events" property to "none" and then utilize the document.elementFromPoint function with the coordinates you have. Keep repeating this process until all dots have been processed.

It may be necessary to temporarily disable the mouse handler during this procedure to prevent any unwanted mouseout or mouseenter events from occurring as the elements beneath the cursor change.

Answer №2

It appears that the event is currently only being sent to the event handler linked to the topmost "dot" in the stack. To enhance this functionality, update the event handler to automatically search for any other dots and check if they overlap with the current position of the sprite. If an overlap is found, trigger their respective event handlers individually while ensuring a flag is included to prevent endless recursive searching. If including a flag directly in the event handler proves challenging, consider adding a field to an object that can be observed by the event handler (such as the data structure tied to a dot) and toggle a flag (e.g., "isCheckForOverlappingDots") before initiating the search.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combine multiple arrays in JavaScript into a single array

Here is the array I am working with: array = ['bla', ['ble', 'bli'], 'blo', ['blu']] I need to transform it into this format: array = ['bla', 'ble', 'bli', 'blo', &a ...

javascriptarrays

Dynamic resizing in NextJs does not trigger a re-render

My goal is to dynamically pass the width value to a component's styles. Everything works fine on initial load, but when I resize the window, the component fails to re-render even though the hook is functioning as intended. I came across some informat ...

javascriptcssreactjsreact-hooksnext.js

Alignment of labels at the same height in Bootstrap 4 forms

Is there a simple way to ensure proper alignment of labels in Bootstrap 4 forms, especially when some labels in the same form-row are longer than others? Check out this example on jsFiddle Here are some visual examples: Incorrect label alignment https: ...

cssformstwitter-bootstrapbootstrap-4label

delivering data from the controller to the view using ajax

I'm facing an issue while trying to send a model from the view to the controller. All attributes get passed successfully except for the FileData, which is a byte array. Even though Ajax sends it to the controller, it shows up as null. How can I succes ...

c#asp.net-mvcjsonjquery

Data filtration - techniques for removing unnecessary information in JavaScript

I have a JSON file containing data that requires filtering. Here is an example structure of the JSON: [{A:"data", C:"flightData", D:"FlightData"}, {B:"data", C:"flightData", D:"FlightData"}, {A:"data", C:"flightData", D:"FlightData"}, {B:"data", C:"flig ...

javascriptexpressfilter

New feature incorporated at the end of choices in MUI auto-suggest widget

Currently, I'm working on enhancing a category adder feature. Previously, I had limited the display of the "add category chip" to only appear for the no-options render scenario. However, I came across an issue where if there was a category like "softw ...

javascriptreactjstypescriptmaterial-ui

Success/Fail Page for Form Redirect

I've been struggling to figure out how to redirect my form to a success or fail page. I've scoured the internet for solutions, looking into traditional form redirects and even JavaScript onClick redirects. Can someone guide me on adding a redirec ...

javascriptphpjqueryhtmlhttp-redirect

Having issues with Facebook's login API for JavaScript?

Apologies for the improper formatting. I am encountering errors in my JavaScript compiler while working with the Facebook Login API... Error: Invalid App Id - Must be a number or numeric string representing the application id." all.js:53 "FB.getL ...

javascriptfacebookapifacebook-javascript-sdkapp-id

I'm curious, what height would be most suitable for a first impression?

I'm in the process of building a website and I want to ensure that all elements are visible within the div without requiring users to scroll. However, I know that screen resolutions vary between computers. What can I do to address this issue? Is ther ...

htmlcss

Instead of showing the data in the variable "ionic", there is a display of "[object object]"

Here is the code snippet I'm working with: this.facebook.login(['email', 'public_profile']).then((response: FacebookLoginResponse) => { this.facebook.api('me?fields=id,name,email,first_name,picture.width(720).height( ...

javascriptangulartypescriptionic3

Transferring a jQuery string to the ASP.NET C# Code Behind File

Having a string that is generated from jQuery such as string1, string2, string3, stringn, I am seeking guidance on how to submit this data using jQuery to another ASP page for processing. How can I pass this string to the C# code? I am interested in usin ...

c#jqueryasp.net

Can I increase the top margin by more than mt-5?

Seeking help to align elements on my website. I've applied mt-5 in the HTML, yet require additional margin space. Any suggestions on how to achieve this? ...

htmlcssbootstrap-4margin

Is it possible to utilize retina images with CSS3's :before selector?

Can I adjust the size of an image inserted using :before? For example, if I want to use a high resolution image in the content below - how can I specify the dimensions? .buy_tickets_btn:before{ content: url(../images/buttons/pink_ticket_btn_bg.pn ...

css

How to position two divs next to each other using CSS with just one adjustment

Is it possible to position two divs side by side, with one of them moving continuously up and down while containing an image? I attempted the following code: <div> <div style="margin:30px;width:100px;height:250px;position:relative;float:left; ...

htmlcssmove

Align the last column to the right side using HTML

I am facing an issue with my current project. I have a page that displays a list of posts in a CSS grid. The last two columns of the grid are supposed to be right-aligned, but for some reason, it's not working as expected. Here is the snippet of the c ...

htmlcssangular

What are the best techniques for achieving flawless ring geometry in three.js?

I'm struggling to achieve perfect ring geometry in three.js, similar to the image here: https://i.sstatic.net/ArxKa.png After spending over a day troubleshooting, my code currently looks like this: var scene = new THREE.Scene(); var camera = new TH ...

javascriptwebthree.js

Navigating to the following webpage with Selenium using Python

url_main = "https://comic.naver.com/webtoon/detail.nhn?titleId=131385&no=292" This particular website features a comment pagination at the bottom of the page. Upon inspecting the page, I noticed that the buttons were structured like this: &l ...

pythonhtmlcssseleniumselenium-chromedriver

What could be causing my AJAX request for JSON data to fail?

I am currently working on a mobile app using PhoneGap and jQuery Mobile. I am attempting to retrieve data from a server with the following request, but it does not seem to be functioning as expected: $.ajax({ url : "https://localhost:8000/weatherD ...

jqueryajaxjsonmobileget

Is it possible to leverage AngularJS string interpolation ({{}}) within the jQuery HTML function?

I am attempting to implement angularJs string interpolation within the Jquery html function $('#existingScoresForWeek').html("<p>{{1 + 1}}</p>"); Unfortunately, the code above is not displaying the Result as 2 <div data-ng-app=" ...

jqueryhtmlangularjsangularjs-interpolate

What is the best way to associate an array of objects with another array in React or JavaScript?

const arrayObj = [{ id: 123, country: "IND" value: "" }, { id: 153, country: "AUS" value: "" }, { id: 183, country: "FRA" ...

javascriptarraysreactjs