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

Question

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

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

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

Answer 1

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

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

• 将<p>标记更改为内嵌标记，例如<span>。

• 将display: inline应用于<p>代码的样式。

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