HTML Area Farve

Min kode til billede og mappe ser sådan ud:
<img src="plantegning.png" class="mx-auto" width="1028" height="765" alt="Plantegning" usemap="#plantegning">
<map name="plantegning">
<area shape="circle" id="102" coords="190,158,10" href="#" alt="Punkt 102">
</map

Kunne det være:

area:hover {background-color: green} i css ?

Et <area> er bare et klikbart stykke af et billede, det kan ikke have baggrundsfarver osv på.

Hvis du vil have en cirkel der er et link og som kan have en baggrundsfarve, kan du bruge et helt almindeligt <a> tag, give det en absolut position og border-radius: 50%; - det giver et cirkulært link der kan styles som ethvert andet element. Skal det være en mere unik form, er du nok nødt til at bruge canvas eller svg. Men <area> kan ikke.

Tak for kommentarerne. Nu synes jeg at være næsten i mål med denne kode:
<style>
.absz{
    position: absolute;
    z-index: 1;
}
</style>   

    <div class="row pb-2"> <!-- Plantegning billede -->
        <div class="col-12 d-flex">
            <img src="plantegning.png" class="mx-auto" width="1028" height="765" alt="Plantegning">
            <div>
            <a  id="101" class="absz" style="top:50px;left:50px" href="#">x</a>
            </div>
        </div>
    </div><!-- row -->

Eneste udestående nu synes at være at "left" starter fra venstre side af container og ikke fra venstre side af billede.

Er det et "div"-problem eller et "mx-auto"-problem???