Changing Pointer, after already changing default cursor

2
votes

I'm creating a stylized page, and have already changed the default cursor, but it goes back to the standard "pointer" when you mouse over a link. I want to change the standard pointer as I did with the default cursor. I tried some javascript that I found, but it didn't seem to work.

    <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="../css/basic.css">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script>
    var elms = document.getElementsByTagName("*");
    var n = elms.length;
    for(var i = 0; i < n; i ++) {
        if(window.getComputedStyle(elms[i]).cursor == "pointer") {
            elms[i].style.cursor = "url(../img/cursor.png)";
        }
     }
</script>

</head>
<body>
      <a>
      <a>
</body>  
</html>

and this was the CSS cursor

    html{
    min-width: 100%;
    min-height:100%;
    cursor: url(../img/cursor.png),auto;
}
body{
    background-color: black;
    cursor: url(../img/cursor.png),auto;
  }
1
javascripthtmlcss
Can you post the whole img link? – imbondbaby
is this what you mean? file:///J:/Graphic/webfolio/img/cursor.png – newby JP

1 Answers

1
votes

Try this:

a:hover, a:active, a:visited {
    cursor: url(../img/cursor.png), auto;
}

Demo

P.S: Used a random image in the demo.