当我在 css 中将鼠标悬停在区域(图像映射)上时如何显示范围?

Question

我有一张太阳系的图像，我需要在图像上方显示一个跨度，例如，当我将鼠标悬停在太阳上时，"太阳" 我该怎么做

<div class="map">
<div id="p-name">
<p> 
<span class="nsun">The sun</span>
<span class="nmerc">Mercury</span>
<span class="nvenu">Venus</span>
<span class="nearth">Earth</span>
<span class="nmars">Mars</span>
<span class="njupi">Jupiter</span>
<span class="nsat">Saturn</span>
<span class="nura">Uranus</span>
<span class="nnep">Neptune</span>
<span class="npluto">Pluto</span>
</p>
</div>
<img class="map" src="map.png" alt="Solar map" usemap="#solarmap">
<map name="solarmap">
<area class="sun" shape="circle" coords="145,285,140" alt="The sun">
<area class="merc" shape="circle" coords="332,300,22" alt="Mercury">
<area class="venu" shape="circle" coords="400,300,36" alt="Venus">
<area class="earth" shape="circle" coords="478,300,36" alt="Earth">
<area class="mars" shape="circle" coords="549,300,26" alt="Mars">
<area class="jupi" shape="circle" coords="669,300,82" alt="Jupiter">
<area class="sat" shape="circle" coords="835,309,77" alt="Saturn">
<area class="ura" shape="circle" coords="1004,309,60" alt="Uranus">
<area class="nep" shape="circle" coords="1134,309,60" alt="Neptune">
<area class="pluto" shape="circle" coords="1226,309,12" alt="Pluto">
</map>
</div>

Answer 1

您可以使用jQuery.mouseenter()和.mouseleave()事件来触发所需的内容。请参阅 https://api.jquery.com/mouseenter/。我建议在地图上使用数据属性以使其更具动态性，否则您需要匹配每个行星的大小写(如果我们发现一个新的行星会发生什么？？;-((。

或者，如果你不想使用jQuery，你可以按照w3schools给出的例子：https://www.w3schools.com/js/tryit.asp?filename=tryjs_imagemap

Answer 2

您可以使用CSS

:hover

例

#p-name{
display:none;
}
.sun:hover + .nsun{
disply:block!important;
}

只需确保将地图放在跨度之前即可

所以你的 HTML 会看起来像这样

<div class="map">
<img class="map" src="map.png" alt="Solar map" usemap="#solarmap">
<map name="solarmap">
<area class="sun" shape="circle" coords="145,285,140" alt="The sun">
<area class="merc" shape="circle" coords="332,300,22" alt="Mercury">
<area class="venu" shape="circle" coords="400,300,36" alt="Venus">
<area class="earth" shape="circle" coords="478,300,36" alt="Earth">
<area class="mars" shape="circle" coords="549,300,26" alt="Mars">
<area class="jupi" shape="circle" coords="669,300,82" alt="Jupiter">
<area class="sat" shape="circle" coords="835,309,77" alt="Saturn">
<area class="ura" shape="circle" coords="1004,309,60" alt="Uranus">
<area class="nep" shape="circle" coords="1134,309,60" alt="Neptune">
<area class="pluto" shape="circle" coords="1226,309,12" alt="Pluto">
</map>
<div id="p-name">
<p> 
<span class="nsun">The sun</span>
<span class="nmerc">Mercury</span>
<span class="nvenu">Venus</span>
<span class="nearth">Earth</span>
<span class="nmars">Mars</span>
<span class="njupi">Jupiter</span>
<span class="nsat">Saturn</span>
<span class="nura">Uranus</span>
<span class="nnep">Neptune</span>
<span class="npluto">Pluto</span>
</p>
</div>
</div>