How to get mouse pointer to show the hand icon when i hover on a div?

Question

    <div onclick="location.href='Some-Page.php';" class="individual col-md-4">
      <img style="border: 6px solid #000; width:150px;height:150px; border-radius:25px" src="facts.jpg" alt="Some Alternate">
      <h4 class="my-3">Facts</h4>
      <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
    </div>

I cannot use the a href code here for onlclick on the div so im using location.href . This is making my mouse pointer icon stay the same when i hover on the div unlike a href where it would change to a hand icon.

Is there a way for me to get the icon for this code too when i hover over it? Is this the only disadvantage of using this code over the regular html code or is there something else like affecting my SEO or something? Any help is appreciated. Thank you

Answer 1

You can use cursor: pointer in your CSS:

 #test { width: 500px; height: 100px; cursor: pointer; background: blue; color: white; }

 <div id="test">Hello</div>

Answer 2

Add this class to your div:

.pointer {
   cursor: pointer;
}

See the Docs: cursor

 .pointer{ cursor:pointer; }

 <div class="pointer">Hello World:)</div>