CODEWITHSUNDEEP
javascriptsvgcursor
Rob
Rob

Reputation: 1495

SVG cursor not responding to a tags

I've created a custom SVG cursor and having trouble with it responding to links. You can see from the example below you're not able to open the link

https://codepen.io/anon/pen/dZymZK

$(document).mousemove(function(e) {
  $(".custom-cursor").position({
    my: "center center",
    of: e,
    collision: "fit"
  });
});
:root {
     cursor: url(http://chrishawkins.us/blank.cur), none;
}

.custom-cursor {
  position: absolute;
  cursor: none;
}
a:hover {
 cursor:pointer !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="pointer" height="50" width="50">
  <polygon points="1,1 49,10 20,20 10,49"> 
    <!-- coordinates are in x,y format -->
    <!-- points go clockwise around the polygon -->
</svg>
  
  
  <a href="bbc.co.uk" target="_blank">bbc</a>

Upvotes: 0

Views: 45

Answers (1)

Vishal Kaul
Vishal Kaul

Reputation: 133

Please give the below property to the selector #pointer:

position: relative;

It should work.

Upvotes: 1

Related Questions