Измените положение изображения на экране вместе с текстом

Question

Я перечислил категории на своем веб-сайте на своей домашней странице. Я хочу, чтобы изображение сменилось синей версией этого положения. Я также хочу, чтобы эта картинка сменилась синей версией, когда заголовок Computer Services находится в положении onhover. Я запрограммировал один способ, но, похоже, он не работает должным образом, потому что я вошел внутрь изображения, оно изменилось, а затем вернулось назад несколько раз. Кто-нибудь может мне помочь с этим?

Вот код, который я сделал для этого; http://jsfiddle.net/4M2sr/

Примечание. Я не хочу, чтобы этот черный текст менял цвет заголовка или изображения.

Answer 1

То, что происходит, заключается в том, что ваш тег <p> расположен поверх других элементов, блокируя эффект наведения при наведении курсора на середину изображения.Это можно исправить несколькими способами:

• Используйте z-index для решения этой проблемы, добавив тег <p> позади других элементов.

• Измените тег <p> на встроенный тег, например <span>.

• Примените display: inline к стилю тега <p>.

Примечание: если вы используете второе или третье, вам может потребоваться настроить стили позиционирования тега <p>.