Question

想找出在HTML中是否存在样式非DOM元素的解决方案。我的问题如下：

希望将鼠标光标悬停在标记上，但是由于它是非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;
}

目标是当您将鼠标悬停在图像地图中的圆圈区域上时，将其更改（而不是默认设置）。

Answer 1

没有答案：只是表明您的代码似乎完全符合您的要求。

#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;
}

<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>

如何在DOM之外设置HTML元素的样式？

1 个答案: