Я изо всех сил пытаюсь заставить мой собственный курсор работать при наведении курсора на горячую точку на карте изображения.Firefox отображает его отлично, но в Safari / Chrome при наведении курсора на карту изображения пользовательский курсор отображается, за исключением случаев, когда вы наводите курсор мыши на фактическую точку доступа (тег области) на изображении, а затем показывает «щелчковый курсор» по умолчанию.Это сводит меня с ума, потому что я попробовал каждый возможный селектор на карте изображения.
Вот код, который я использую:
<map name="gameImg" id="gameImg">
<area shape="rect" coords="299,4,358,64" class="gameElement" href="#" id="sailingBoat" name="0" />
<area shape="rect" coords="365,43,505,161" class="gameElement" href="#" id="cruiseShip" name="1" />
</map>
И CSS:
#gameScreen, #gameScreen .wrapper, #gameScreen .wrapper a, #gameScreen .wrapper a:hover, #gameScreen area, #gameScreen area a, #gameScreen area a:hover, #gameScreen img, #gameScreen img a, #gameScreen img a:hover, #gameImg, #gameImg a, #gameImg a:hover, .gameElement, .gameElement a, .gameElement a:hover, #gameScreen map a, #gameScreen map a:hover, #gameScreen:hover, #gameImg:hover {
cursor: url(cursor.cur), url(images/cursor.cur), default;
}
Некоторые из селекторов не показаны сверху, но я добавил их просто для того, чтобы охватить каждый возможный сценарий.
Я уверен, что это чисто проблема селектора, но я не уверен, чтоселекторы, которые нужно добавить, чтобы пользовательский курсор был одинаковым, независимо от того, ссылка это или нет.