对于我正在处理的项目,我使用世界地图图像,并将此图像居中。 我们的想法是,如果你越过某个国家,它下面会出现一个工具提示信息并告诉你这个国家的名字。 弹出框是用css构建的。 例如:
span.Amerika:hover:after {
content: "Amerika";
position: absolute;
width: 80px; /* box size */
height: 20px; /* box size */
padding: 10px;
font-size: 14px;
font-weight: bold;
text-align: center;
color: rgb(113, 157, 171);
background: rgb(255, 255, 255);
border: 4px solid rgb(255, 255, 255);
border-radius: 5px;
text-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 1px;
box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 2px 0px;
top: 320px; /* positioning */
left: 320px; /* positioning */
}
你可能已经猜到了定位只适用于我的屏幕。在所有较大的屏幕上,这些盒子将出现在其他地方。 所以我正在考虑将工具提示消息悬停在光标上。 (按照光标) 我该怎么做?