更改圖片onhover位置連同文字

Question

我在我的主頁上列出了我的網站上的類別。我希望圖像變成藍色版本的onhover位置。當計算機服務標題在onhover位置onhover時，我也希望該圖片更改爲藍色版本。我編碼的方式之一，但它看起來不能正常工作，因爲我走進了它改變的圖像裏面，然後它回來了好幾次。有沒有人可以幫助我呢？

這是我爲此編寫的代碼; http://jsfiddle.net/4M2sr/

注意：我不希望黑色文字改變標題或圖片的顏色。

Answer 1

發生了什麼事是您的<p>標籤位於其他元素之上，當您將鼠標懸停在圖像的中間位置時，阻止了懸停效果。有幾個方法可以解決這個問題：

• 使用z-index迫使其他元素背後的<p>標籤來解決這個問題。

• 將<p>標記更改爲內嵌標記，如<span>。

• 將display: inline應用於<p>標籤的樣式。

注意：如果您使用第二個或第三個，則可能需要調整<p>標記的定位樣式。