鼠标悬停在不同位置的 Javascript/CSS/PHP 悬停框

Question

我试图通过鼠标悬停在图像上显示不同的位置。所以基本上我有一个图像，当你将鼠标悬停在附近的链接上时，一个悬停框会出现在图像上 CSS 中指定的位置。但是，我试图在不为每个 CSS 框创建代码的情况下通过多个链接实现它。

我有大约 50 个链接，当我将鼠标悬停在一个链接上时，我希望能够从数据库或文本文件中提取以获取它应该在图像上创建悬停的位置。我最初的想法是使用 PHP 来帮助从文件中提取信息，将其放入数组中，然后让 CSS 动态更新。如果用户只需单击链接，这似乎是可行的，因为我可以告诉 CSS 数组中的哪个位置来查找位置。如果可能的话，我不确定如何让它与鼠标悬停一起使用。

CSS 代码目前非常基础，如下所示。 #box { position:absolute； 顶部:100px； 左:200px； 背景色:#ffffff;}

如果有任何不合理之处或我只是忘记了什么，请告诉我。

谢谢!

Answer 1

好的，那么您要做的就是所谓的 CSS Sprite 。这就是你想要的(我的示例与你的代码正交，但讲授原理):

.link {
    width: 50px;
    heigh: 50px;
    float: left;
    text-indent: -9000px;
    background-color: transparent;
    background-image: url(path/to/sprite.png);
    background-repeat: no-repeat;
}

    .link#one {
        background-position: 0px 0px; /* This one is top left on the image. */
    }

    .link#two {
        background-position: 0px 50px; /* This one is 50px from top and 0px from left on the image. */
    }

你可以从这里看到去哪里(你不需要使用 .link#one。我只是用它来举例。你可以只使用 #one，甚至是类 .one。

练习一下，您很快就会明白它是如何工作的。下面是一些示例 HTML:

<a id="one" class="link">One</a>
<a id="two" class="link">Two</a>

通过所有这些，将您的图像制作成 100 像素高 x 50 像素宽的 .png 文件，每个链接为 50 像素 x 50 像素。