Задача: сделать такую карту, чтобы при наведении на её элементы менялся курсор. Проблема в том, что все картинки получаются прямоугольными, и смена курсора происходит при наведении на прямоугольный блок. Хотелось бы, чтобы курсор менялся только при наведении на определённую часть картинки. Как это можно сделать?
.atyrau {
position: absolute;
padding-top: 440px;
padding-left: 185px;
height: 147px;
width: 285px;
z-index: 2;
cursor: pointer;
}
.mangystau {
position: absolute;
padding-top: 565px;
padding-left: 280px;
cursor: pointer;
}
.aktobe {
position: absolute;
padding-top: 345px;
padding-left: 380px;
width: 325px;
height: 275px;
z-index: 0;
cursor: pointer;
}
.westkaz {
position: absolute;
margin-top: 325px;
margin-left: 170px;
cursor: pointer;
}
<div class="map">
<div class="westkaz">
<img src="https://i.stack.imgur.com/3FzA1.png">
</div>
<a href="#" class="westkazobvodka-a">
<img src="https://i.stack.imgur.com/3FzA1.png" class="westkazobvodka">
</a>
<div class="atyrau"><img src="https://i.stack.imgur.com/GCyl4.png"></div>
<div class="mangystau"><img src="https://i.stack.imgur.com/OIi7G.png"></div>
<div class="aktobe"><img src="https://i.stack.imgur.com/Efi8t.png"></div>
</div>
При наведении на область вокруг элемента, курсор меняется. Также через код страницы можно определить проблему.