title: How to add hover effect to an image in specific location using css or jquery?
body: <p>I'm working on an image map and when I hover on the state part of the image it will have an hover effect. Since this is just a <code>.png</code> file then is there any ways to add hover effect to a certain part of the image?</p>
  
  <p><img src="https://i.stack.imgur.com/3jsXT.png" alt="enter image description here"></p>
  
  <p>So when I hover over the <code>star</code> icon then the state color will change so is there any possible way to do this with css or jquery? </p>
  
  <p><strong>UPDATE:</strong> What I want to do is to get the location or coordinates of the <code>star</code> icon on the map and add hover effect to it.<br/>
  <strong>NOTE:</strong> This image will be responsive.</p>