css - 将图片悬停位置与文本一起更改

Question

我在我的主页上列出了我网站中的类别。我希望图像在悬停位置变为蓝色版本。当计算机服务标题悬停在悬停位置时，我还希望该图片更改为蓝色版本。我用一种方式编码，但它看起来工作不正常，因为我进入了它改变的图像内部，然后又返回了几次。有没有人可以帮我解决这个问题？

这是我为此编写的代码； http://jsfiddle.net/4M2sr/

注意:我不希望黑色文本改变标题或图片的颜色。

Answer 1

发生的事情是你的 <p>标签位于其他元素之上，当您将鼠标悬停在图像中间时会阻止悬停效果。有几种方法可以解决此问题:

• 使用 z-index通过强制 <p> 来解决这个问题标记在其他元素后面。

• 更改 <p>标记到内联标记，例如 <span> .

• 申请 display: inline到 <p>标签的样式。

注意:如果您使用第二个或第三个，您可能需要调整 <p> 的定位样式标签。