Как исправить фоновое изображение при наведении курсора после кнопки смены фонового изображения с помощью jQuery?

Question

Я выяснил, как это исправить, но я сдался ...

Есть 2 возможных ошибки:

1 # Это своего рода расширенный пользовательский интерфейс, такой как видеоигра, эта полоса имеет цвет в градациях серого, затем наведите курсор мыши на полосу, она изменит цвет с серого на красный и с черным эффектом затухания. Затем вы нажимаете кнопку, чтобы скользить по этой полосе, наведение отключено, но возникает проблема, связанная с тем, что серая область не исчезает.

Изображение является спрайтом CSS.

2 # Когда вы нажимаете некоторые кнопки ниже на панели, это меняет текстуры на фоне с эффектом затухания, также оно применяется к фону при наведении, но оно определенно удаляет при наведении ...

Мне действительно нужна помощь, вот моя скрипка, надеюсь, вы понимаете это: http://jsfiddle.net/JBFUT/7/

Большое спасибо заранее!

Answer 1

Если вы поддерживаете более новые браузеры, я бы изменил это с прозрачностью rgba и CSS на :hover

Для старых браузеров вы можете использовать два изображения.Одна версия в оттенках серого у вас есть, а другая - градиент от прозрачного до красного, который вы можете поместить сверху и при наведении на fadeOut.

Это должно дать вам тот же эффект и упростить ваш код.

Answer 2

Исправлено http://jsfiddle.net/kvkUB/3/