Clicking with element on other element

Question

I know it sounds silly, but what I want to do is trigger click with some html element hovering over another element.

Lets say we got .cursor that is hovering anchor text. In this case click on .cursor should open a google page.

<div class="cursor"></div> 
<div class="htmlPage">
    <a href="www.google.com">Google</a>
    <a href="www.facebook.com">Faccebook</a>
     <a href="www.stackoverflow.com">Stack</a>
</div> 

Any ideas how to do that?

and this don't count

$('.cursor').click(function(){
     $('.htmlPage a').click();
})

Cursor should be movable and should be able to click on other links.

Cursor is that blue circle hovering Google button. Here I have cursor on google, now on click this should link to google, If i were to click on stack then stack should have opened.

Answer 1

If you are not using IE you can use pointer-events:none in CSS. Then your element will be unresponsive to any mouse interaction (and acting like a ghost foreground element).

The workaround for IE is someting like that:

var x = event.pageX;
var y = event.pageY;
$('.cursor').hide();
var here = document.elementFromPoint(x, y);
$('.cursor').show();
// Do what you want with the element here
// Find the parent a element needed with here.parentNode and here.tagName === "A"
// And then fire the click function

I've never use jQuery but I think it should work.

Hope it could help