Wordpress多媒体资料悬停操作

我正在做一个投资组合，希望画廊只包括纯色的盒子。此外，它上面还会有一个图标，表示它是什么类型的项目（例如打印、网络等）。我希望发生的是，当您将鼠标悬停在其中一个框上时，纯色将更改为项目的预览，例如图片。当鼠标悬停在长方体上时，图标应保持不变

如果这是因为我的英语不好而无法理解的，我制作了一个图形来可视化我想要的动作（红方块处于悬停模式）：

---

有人可以试着指导我吗？

这不再是一件非常困难的事情，但它需要一些CSS3技能。还有一些可用的Wordpress插件（例如，尝试在Wordpress插件站点中搜索悬停图像）和/或包含类似功能的主题，您可能希望从这些插件开始，然后根据自己的目的进行调整。但最后，您基本上需要研究以下CSS：

• ：悬停
• 位置：绝对位置
• z指数

有关开始的位置，请参见上的讨论。实际上，您不需要这里讨论的：after标记。我只用：hover属性做了类似的事情。诀窍是创建一个外部div，其中包含所有内容（包括您希望显示的图像），然后使用带有z索引的“position:absolute”CSS将项目堆叠在彼此的顶部。使用：hover属性将堆栈“顶部”的任何项目的不透明度更改为较轻的不透明度，从而使基础项目显示在顶层

CSS可能如下所示：

.gallery1 {width: 280px; height: 178px; display: inline-block; float: left; margin: 5px}
.gallery1 img {position: absolute; z-index: 1}
.gallery1 div {position: absolute; opacity: 1; z-index: 2; height: 178px; width: 280px; text-align:center; vertical-align: middle; line-height: 178px; margin: 0px; padding: 0px; font-family: Arial; font-size: 14pt; background-color: rgb(255, 245, 130)}
.gallery1 div:hover {opacity: 0.3}

HTML看起来像：

<div class='gallery1'>
<img src='whatever.jpg'>
<div>Text or code for icon here</div>
</div>

此处图标的文本或代码

---

其思想是，通过使用position:absolute，img在gallery1 div中固定到位，然后通过z-index将其设置为低于文本或图标所在div的值。带有图标的div也是position:absolute，并且具有更高的z索引，因此它堆叠在图像的顶部，并且具有固定的高度/宽度设置以匹配图像大小。接下来，它的不透明度为1，背景色为1，以便它覆盖或隐藏图像。通过使用：hover样式，降低了不透明度，使图像得以显示。

我最后使用的方法是在背景中放置：url（icon.png）no repeat center；在图像上。这确保了图像将保持在图像的中心，因此更适合响应网站。此外，您不必使用z-index等。谢谢你的回答！您好，Baard--这解决了浮动在顶部的图标问题，但是当鼠标悬停在上面时，您如何解决项目预览的需要呢？这就是我回答的问题。：）我在下一篇文章中说过这句话，不妨也在这里发表。你是对的，我在上一篇评论中发布的解决方案并没有解决我所有的问题，对此表示抱歉。我最终使用图标作为img标记，然后在CSS中将颜色和图像作为背景。简单且响应迅速的解决方案，效果极佳。谢谢你的帮助！