Css PHP：为图像添加悬停效果

我正在处理一个PHP文件。我在菜单栏上工作，菜单栏包含所有图像按钮，如果有人在其中一个按钮上悬停，我希望他们更改图像（颜色）。有人能帮我解决这个问题吗

$globalsettings = array(
    'src' => $sImageURL.'global1.png',
    'alt' => $clang->gT("Global participant settings"),
    'title' => $clang->gT("Global participant settings"),
    'style' => 'margin-left:5px',
    'style' => 'margin-right:1px'
);

---

您可以使用CSS（层叠样式表）创建悬停效果。CSS必须位于外部样式表或嵌入的样式元素中

我正在使用

按钮

来设置所有

元素的样式，但是您可以将其替换为您想要设置样式的任何元素，例如

为

IMG

（小写或大写）

如果您不知道如何使用样式表，只需将嵌入式样式插入HTML文档的

<style type="text/css">
    /* Place CSS here */
</style>

---

还有一些老式的悬停效果，但它们就像Frontpage时代一样，所以我不推荐使用它们。CSS悬停效果是当今的标准。

您试图一步解决两个问题。您需要获得要显示的图像，然后在悬停状态下在它们之间切换

你不能在JS中动态地编辑一个按钮（好吧，你可以用画布和HTML5来编辑，但这不是小事）。因此，您需要使用CSS（或者可能是JS）在两个图像之间交换

这些图像来自何处取决于您-您可以预先生成它们，这是一个小小的工作，但易于实现，无需PHP。如果颜色只有一两种变化，这将是首选

或者，您可以使用一个PHP脚本动态生成图像（理想情况下，缓存图像以避免以后重新计算）。这允许无限的变化，但需要更多的服务器开销。这种方法通常用于生成缩略图，因为源图像事先不知道

请注意，PHP无法控制何时显示每个图像-它只是以与Web服务器提供静态图像完全相同的方式向CSS/JS提供图像

---

如果您想在PHP中编辑图像，您需要查看

，您可以使用css通过使用content:selector轻松地完成此操作

例如，您的标记可能如下所示：

#myelement { 
    background: url(my_bg.png) -0 -0; 
}

#myelement:hover { 
    background: url(my_bg.png) -0 -100px; 
}

<div class="link" id="link1">
    <a href="yourhref"><img /></a>
</div>

通过使用您在脚本中指定的选择器，您会发现很容易修改它以满足您的需要

---

这里有一把小提琴演示了这一点，你可以使用精灵图像和悬停改变位置。

---

此外，您还可以从性能中获益。

您应该看看PHP无法处理此问题。。。CSS或Javascript更适合此工作。你可以有一个CSS

：悬停

，这样它可以改变背景色。当它是图像时，我如何改变背景色？在回答之前请先阅读..@JohanVanBaak所以你有一个背景图像，你想在悬停时将其更改为背景色？不，我在主页上有一个菜单，主页/关于我们/联系人/等等。。这些都是图像。我希望当有人悬停在主图像上时，它会切换到相同的图像，但颜色不同。上面是全局设置的代码，每个图像都有自己的代码。但是我怎样才能在上面的代码上设置悬停效果呢？我在哪里可以定义按钮呢？很抱歉，我的英语不是很好，我的gramar可能不好。再次更新，解释你可以用CSS样式的元素。再次更新，解释CSS精灵。我理解，但我不能真正使DIV的$home，$globalsettings已经分配。

<div class="link" id="link1">
    <a href="yourhref"><img /></a>
</div>

#link1 a img{
    content:url("http://www.maxxpotential.com/stephen2/wp-content/uploads/2013/03/Images-from-Deep-in-the-Woods-by-Astrid-Yskout-4.jpg");
}

#link1:hover a img{
content:url("http://blogs.mathworks.com/pick/files/zebrainpastelfield.png");
}