Html 在css中将鼠标悬停在某个区域（图像贴图）上时，如何显示跨距？

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

太阳
水星
维纳斯
土
火星
木星
土星
天王星
海王星
冥王星

您可以使用jQuery

.mouseenter（）

和

.mouseleave（）

事件来触发所需的内容。看见我建议使用地图上的数据属性使其更具动态性，否则你需要匹配每个行星的情况（如果我们发现一个新的行星会发生什么？？；-）

---

或者，如果您不想使用jQuery，可以按照w3schools给出的示例进行操作：

您可以使用

CSS

：悬停

范例

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

太阳
水星
维纳斯
土
火星
木星
土星
天王星
海王星
冥王星

你累了什么？请包括您尝试过的代码以及您遇到的问题，也许请包括一个示例，而不仅仅是指向其他地方的链接。