Хотелось бы узнать, есть ли решение для стилизации элементов не DOM в HTML. Моя проблема заключается в следующем:
Желает изменить курсор мыши над тегом, но, поскольку он не является элементом DOM, он не может быть достигнут (согласно предыдущим результатам). Только и принимает только следующий код:
area {
cursor: pointer;
}
Однако я хочу использовать это:
area {
cursor: url("https://img.icons8.com/dusk/64/000000/cursor.png"), pointer;
}
Когда курсор перемещается внутри области, он должен изменить свой значок на пользовательский.
Хотя я читал, что это возможно при использовании JSX? * Это было бы для браузерной игры, где крайне важно постоянно сохранять пользовательский курсор (а не возвращаться к тому, который используется система)
* К сожалению SVG не вариант.
Пробовал изменять глобальные параметры CSS, коды html / javascript заранее. Как вы уже догадались, это выходит за рамки моих знаний HTML, и просмотр сотен веб-страниц (включая переполнение стека) не решил мою проблему.
Код, который я пытаюсь изменить:
HTML
<div>
<map id="world" name="world">
<area shape="circle" alt="Africa" title="Africa" coords="682,462,97" href="AllItems.aspx" target="_self" onmouseover="afr.style.visibility='visible'; afr.src='africa.png';" onmouseout="afr.style.visibility='hidden';" />
<area shape="circle" alt="Americas" title="Americas" coords="228,198,123" href="AllItems.aspx" target="_self" onmouseover="ame.style.visibility='visible'; ame.src='americas.png';" onmouseout="ame.style.visibility='hidden';" />
<area shape="circle" alt="Asia/Pacific" title="Asia/Pacific" coords="1110,412,122" href="AllItems.aspx" target="_self" onmouseover="asi.style.visibility='visible'; asi.src='asiapacific.png';" onmouseout="asi.style.visibility='hidden';" />
<area shape="circle" alt="Europe" title="Europe" coords="627,136,98" href="AllItems.aspx" target="_self" onmouseover="eur.style.visibility='visible'; eur.src='europe.png';" onmouseout="eur.style.visibility='hidden';" />
</map>
<img alt="Africa" style="position:absolute;top:559px;left:779px;visibility:hidden;" id="afr" src="africa.png" />
<img alt="Americas" style="position:absolute;top:321px;left:351px;visibility:hidden;" id="ame" src="americas.png" />
<img alt="Asia/Pacific" style="position:absolute;top:534px;left:1232px;visibility:hidden;" id="asi" src="asiapacific.png" />
<img alt="Europe" style="position:absolute;top:234px;left:725px;visibility:hidden;" id="eur" src="europe.png" />
<img id="worldmap" alt="world map" src="http://fivebs.net/fiddle/worldmap.png" usemap="#world" />
</div>
CSS
#worldmap {
position: relative;
cursor: url("https://img.icons8.com/wired/64/000000/cursor.png"), auto;
}
area {
cursor: url("https://img.icons8.com/dusk/64/000000/cursor.png"), pointer;
}
Целью будет изменение курсора мыши при наведении курсора на области круга в пределах карты изображения (а не по умолчанию).