Conceal elements within a div using the 'elementFromPoint' function

In my HTML, I have a div that contains an icon and some text.

I want to make it so that when I hover over the div with my mouse, only the div itself is visible to the 'elementFromPoint' function. How can I achieve this?

Here is an example of the code:

<div id="rightGazeOption_0" class="gazeLinkOption">
    <i style="outline: 0px none;" class="gazeLinkOptionIcon fa fa-external-link"></i><span>ElementName</span>
</div>
var myElement = document.elementFromPoint(/*CENTER OF DIV*/);

Currently, 'myElement' could be either the "< i >" or the "< span >" element, but I want it to refer to the div itself. How can I send the < i > and < span > elements to the background so that "elementFromPoint()" only detects the main div container?

Is this possible?

javascripthtmlcss

Answer №1

Learn how to access the parent node of an element:

var myElement = document.elementFromPoint(/*CENTER OF DIV*/).parentNode;

Another way is to use the closest() method as suggested by adaneo:

var myElement = document.elementFromPoint(/*CENTER OF DIV*/).closest('div')

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

Enable Google Chart to visualize multiple sets of data beyond just 2

This Google chart displays 2 data sets (Tea, Coffee). I've attempted to modify it to show 5 data sets but encountered difficulties. I experimented with changing the button.onclick function and the button value. Below you will find the original code (2 ...

javascripthtmlasp.netasp.net-mvcgoogle-visualization

Page design ruined as a result of oversized fonts in IE9 for <h2> elements

Everything looks great on various browsers, except for the notorious IE9. We've implemented a block-style layout with a width of 660px, centered on the page. Despite setting the h2 width to 660px to match the layout, IE9 displays the font size much ...

htmlcssinternet-explorer-9

Node.js script terminated: Process concluded with an exit code 139 due to being interrupted by signal 11 (SIGSEGV)

I'm encountering a frustrating issue with my script - it keeps crashing and the debugger isn't able to pinpoint the error. I've attempted using try-catch blocks, but they just don't seem to work. Any recommendations on how I can better ...

javascriptnode.jssegmentation-faultobjdump

Unusual predicament encountered while using Flow type validation

I've encountered a puzzling situation in my React app while trying to integrate Flow's typechecking. I'm struggling to make everything work smoothly. Here is the relevant code snippet: // @flow export const UPDATE_SESSION_PROP: string = &ap ...

javascriptreactjsflowtype

Prevent certain HTML content from being displayed in the input field

My input field behaves like a chat box where users can enter text that gets displayed on the page. However, I've discovered that users can also include HTML tags in their inputs to manipulate the output. For example, entering <b>Hello</b> ...

jqueryhtmlinput

Javascript - Single line conditional statement

As I continue to improve my JavaScript skills, I'm looking for guidance on optimizing the following if statement. Is there a way to shorten it, possibly even condense it into one line? How can I achieve that? onSelect: function (sortOption) { th ...

javascriptvue.jsif-statementecmascript-6

Issue with AngularJS factory $http.get request receiving HTML files as response

Could someone please explain why I keep receiving an HTML file as a return from my Angular factory? This is the route on my backend: function ensureAuthenticated(req, res, next) { if (!req.headers.authorization) { return res.status(401).send({ mess ...

javascriptangularjsnode.jsmean-stackangularjs-factory

Is there a way to toggle the slide effect of one 'div' without affecting another one?

Hey everyone! I am new to jquery and currently working on a project with two div elements that are slidetoggled. The issue I am facing is that when I open or close one div, the other div also moves along with it. I understand what is happening in the back ...

javascriptjqueryhtmlslidetoggle

Sending information to a PHP script using Ajax

I am working on a project that involves input fields sending data to a PHP page for processing, and then displaying the results without reloading the page. However, I have encountered an issue where no data seems to be passed through. Below is my current s ...

javascriptphpjqueryajax

Grid of domes, fluid contained within fixed structures and beyond

I've been grappling with this issue for a while now, and have had to rely on jQuery workarounds. I'm curious if there is a way to achieve this using CSS or LESS (possibly with javascript mixins). The page in question consists of both fixed and f ...

javascripthtmlcssgridless

Retrieving information through callback functions

A function I developed checks a list of tags that are submitted to it, sorting the good ones into a "good" array and the bad ones into a "bad" array. This process occurs within a callback, allowing the rest of my code to continue once complete. However, I ...

javascriptjquery

Acquire a JSON response from a web address by utilizing JavaScript

If you navigate to , you will find a JSON file filled with information about your current geolocation. My goal is to save this JSON data into JavaScript variables, allowing me to manipulate and extract specific fields from the file. ...

javascriptjson

Possible revised text: "Exploring methods for verifying elements within a div using Selenium

I have a situation where I need to verify elements within a div by using the following xpaths. The xpath for each item is as follows: Item 1:- //*[@id='huc-last-upsell-rows']/div[1]/div[2]/div[1]/div/div/a/img Item 2:- //*[@id='huc-last-u ...

javascripthtmlselenium

Is it possible to create multiple text input components using the "each" function, and how can I update the state by combining all of them together?

I am looking to create a text-based word game where the length of each word changes with every level. Each letter will be placed in its own box, forming a matrix (e.g. 10 words, length: 10 => 10x10 matrix). How can I generate multiple text input compone ...

javascriptreactjsreact-native

Notification of Exceeding File Size Limit

Seeking assistance with implementing a 'filesize' error message into a script used for uploading BLOB files to a mySQL server. if (!mysql_connect($db_host, $db_user, $db_pwd)) die("Can't connect to database"); if (!mysql_select_db($dat ...

phphtml

Using jQuery to modify the CSS of a div located outside of an iframe

Currently, I am developing a straightforward script. Firstly, here is all of the code that I have: <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript"> function SuperWebF1() { $("#outerd ...

javascriptjqueryhtmlcssiframe

Is there a way to improve or simplify this jQuery validation code?

I am implementing client side validation using jQuery to ensure all fields are filled in before proceeding. var passedValidation = new Boolean(true); // Validate Required Fields if ($('#fbsignup input.firstName').val().trim() == '') { ...

javascriptjqueryhtmlvalidation

How about beginning a JavaScript count with a randomly generated number?

As I work on developing this code, I am faced with a challenge: /** * Increment value with random intervals. * @param {string} id - Id of DOM Element. * @param {number} start - Start counter value. Applied immediately- * @param {number} end - End c ...

javascript

What is the best way to handle multiple axios calls with pagination in a React application?

Discussing React Pagination and Handling Multiple Axios Calls In my current project, I am faced with the challenge of mapping through an array of numbers and making sequential API calls for each one. The API I'm working with returns paginated results ...

javascriptreactjsecmascript-6paginationaxios

Switch image formats to webp using react js

Utilizing the react-dropzone package, I aim to incorporate images into my application. To achieve this, I must send the images to a firebase server after managing image conversions. Whilst browsing through YouTube tutorials, I came across a guide demonstr ...

javascriptreactjsnext.jswebp