html map area hover effect with css

Question

How can we change image map area background color with hover and click without any third party plugin. I tried this.

$(document).on('click', '.states', function(){
         $(this).css("background-color","red")
});
        
$(document).on('mouseover', '.states', function(){
          $(this).css("background-color","blue")
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://www.touropia.com/gfx/b/2019/07/australia.png" usemap="#image-map">

<map name="image-map">
    <area class="states" target="" alt="" title="Western Australia" href="#" coords="322,390,306,399,289,402,276,403,260,414,247,426,239,435,221,437,204,431,188,435,175,446,152,460,131,456,123,444,113,440,117,432,127,428,127,406,121,382,117,354,105,312,92,293,99,295,104,291,105,278,90,251,99,226,98,210,103,222,111,209,125,199,138,192,156,188,176,178,203,173,223,144,222,132,230,119,243,138,245,124,245,113,256,114,260,98,268,100,268,93,272,89,268,83,278,81,287,70,300,73,310,84,310,94,316,96,317,85,323,88,323,96" shape="poly">
    <area class="states" target="" alt="" title="Northern Territory" href="#" shape="poly" coords="325, 91, 326, 285, 461, 285, 459, 114, 447, 104, 441, 104, 433, 96, 423, 88, 420, 87, 428, 74, 430, 70, 429, 66, 425, 63, 430, 57, 435, 53, 440, 47, 443, 43, 438, 40, 435, 39, 431, 41, 427, 41, 419, 41, 415, 39, 410, 35, 404, 38, 398, 33, 392, 33, 384, 31, 379, 22, 369, 22, 368, 25, 374, 28, 379, 29, 373, 37, 366, 40, 357, 39, 354, 41, 351, 43, 349, 50, 344, 44, 342, 52, 340, 54, 343, 60, 337, 62, 332, 65, 333, 73, 331, 77, 336, 81, 338, 82, 335, 86, 335, 92" />
    <area class="states" target="" alt="" title="Queensland" href="#" shape="poly" coords="506, 340, 621, 341, 633, 331, 650, 334, 662, 341, 667, 336, 674, 330, 682, 327, 692, 327, 688, 319, 685, 310, 685, 299, 681, 283, 681, 271, 673, 264, 668, 257, 660, 249, 655, 244, 653, 239, 651, 237, 651, 221, 645, 219, 638, 219, 633, 210, 626, 197, 623, 189, 616, 178, 609, 174, 604, 169, 599, 166, 589, 161, 583, 157, 581, 149, 581, 141, 581, 131, 577, 127, 572, 114, 572, 97, 568, 85, 558, 77, 548, 71, 546, 78, 543, 62, 542, 51, 539, 41, 530, 26, 524, 19, 519, 25, 517, 38, 515, 45, 514, 56, 512, 68, 512, 81, 513, 97, 510, 108, 504, 118, 500, 128, 491, 133, 482, 134, 477, 124, 467, 121, 458, 115, 459, 283, 508, 286" />
    <area class="states" target="" alt="" title="South Australia" href="#" shape="poly" coords="324, 285, 506, 286, 503, 527, 493, 515, 486, 509, 488, 505, 484, 503, 488, 497, 489, 491, 481, 480, 483, 471, 482, 468, 475, 468, 471, 470, 464, 474, 461, 474, 469, 461, 462, 446, 460, 443, 456, 455, 449, 462, 443, 463, 450, 455, 454, 449, 453, 441, 457, 434, 460, 423, 461, 418, 455, 409, 451, 418, 447, 424, 441, 432, 437, 442, 428, 451, 425, 461, 420, 452, 417, 443, 413, 435, 410, 424, 403, 422, 401, 417, 402, 411, 397, 407, 387, 398, 378, 398, 371, 397, 364, 391, 355, 389, 346, 389, 342, 390, 329, 391, 324, 391" />
    <area class="states" target="" alt="" title="New South Wales & ACT" href="#" shape="poly" coords="503, 445, 502, 525, 514, 531, 518, 531, 527, 531, 533, 537, 547, 543, 551, 536, 557, 530, 557, 526, 562, 520, 566, 521, 567, 526, 567, 535, 574, 535, 576, 541, 586, 541, 592, 539, 598, 533, 602, 523, 607, 522, 616, 521, 634, 517, 636, 517, 620, 511, 612, 507, 607, 503, 603, 492, 594, 488, 581, 485, 566, 483, 560, 488, 553, 482, 544, 477, 541, 470, 532, 465, 537, 461, 532, 459, 524, 457, 521, 450, 513, 446, 508, 448" />
    <area class="states" target="" alt="" title="Victoria" href="#" shape="poly" coords="506, 340, 626, 341, 631, 335, 638, 333, 640, 333, 646, 332, 655, 335, 656, 339, 660, 343, 664, 346, 666, 341, 669, 337, 669, 330, 674, 328, 678, 327, 684, 327, 687, 327, 692, 327, 692, 335, 691, 348, 684, 349, 689, 352, 689, 364, 684, 367, 684, 377, 684, 386, 677, 405, 677, 414, 671, 414, 671, 414, 671, 414, 658, 434, 653, 447, 650, 461, 647, 473, 642, 483, 639, 502, 639, 509, 636, 514, 629, 508, 619, 505, 610, 499, 607, 488, 604, 482, 594, 482, 589, 482, 583, 482, 581, 481, 572, 478, 568, 477, 564, 479, 561, 480, 560, 483, 552, 474, 550, 470, 541, 463, 539, 455, 535, 453, 530, 450, 527, 454, 526, 453, 524, 445, 520, 443, 512, 443, 502, 441" />
</map>

Answer 1

<map> and <area> tags are not rendered on the screen. They just define mouse actions area for the browser to understand so that it can perform actions on the underlying image/svg element.

If you want areas to change colors, you need to recolor the underlying image or use external libraries. This is a very challenging problem and might take a lot of time and effort to do on your own.

http://www.outsharked.com/ImageMapster/default.aspx?what.html is a robust minimal library for the task.