1

This question more probably does not fit in most projects, but as a curiosity:

I know it sounds crazy but is it possible to make the mouse pointer go underneath an element in CSS (or any possible way!)? (Of course z-index does not work in this case. XD)

Or maybe create a pseudo mouse pointer customized for our webpage that in fact simulates the behavior of the user's real mouse pointer. I mean to create a virtual mouse pointer (a DOM element) that is indeed a replacement for the user's mouse pointer in our webpage (the user's mouse is somehow hidden) and our virtual mouse follows the real pointer's movement!

Ali Baghban
  • 517
  • 1
  • 5
  • 13
  • How are the elements it is to go under specified? It is possible to get rid of the standard cursor and move your own element around but you’d need some way of knowing what it is to go behind and what it is not to go behind. – A Haworth Mar 31 '22 at 21:29
  • @AHaworth I think based on SymboLinker's answer, it is possible to create a custom pointer and onMouseEnter event of the element, read the elements z-index and apply decremented value (by 1) to the pointer's z-index (pointer is a DOM element). – Ali Baghban Mar 31 '22 at 22:01
  • Z index is relative, but even before thinking about how we would implement this, what is the requirement, what elements would it go behind and what elements would it be visible over, starting with body…. There has to be some way of the system knowing that. Otherwise it may never be visible. – A Haworth Apr 01 '22 at 02:20
  • @AHaworth by registering an onMouseEnter event on the elements that we want to apply this performance. – Ali Baghban Apr 01 '22 at 07:39

1 Answers1

3

You could hide the pointer on hover (or on your whole page). Define this CSS class and use it in your HTML:

.no-cursor {
  cursor: none;
}

Then your second question, about creating your own mouse pointer: the first thing you need is the location. Then use that location to update the location of the shape you have created in HTML and CSS.

See Javascript - Track mouse position on how to get the location.

SymboLinker
  • 884
  • 6
  • 15
  • Nice perspective on the solution. I liked it. I think it still does not represent going underneath the element that mush because as soon as the element is hovered, the mouse pointer is gone immediately. It would be good if half the pointer is displayed (the part which is still outside the element boundary) and the other half is hidden (the part underneath the element). – Ali Baghban Mar 31 '22 at 21:16
  • 1
    You could also hide the mouse pointer on your entire page and do the “half visible stuff” on your customized shape. – SymboLinker Mar 31 '22 at 21:24