Дергается картинка при hover

AN
На сайте с 23.06.2014
Offline
8
1592

Добрый день, просьба помочь советом по верстке.

На сайте есть блок в котором происходит смена картинке по hover действию.

Получается что сменяется одна картинка на другую, при смене виден белый блик.

Пример залил на http://jsfiddle.net/qverlink/1q26xnj4/

В залитом примере белого блика нет. Но он есть на сайте.

В чем может быть проблема?

Разработка сайтов (http://housevl.ru)
дани мапов
На сайте с 06.09.2012
Offline
204
#1

Надо не две картинки подгружать, а спрайт сделать из двух. Спрайт - фоном. И при наведении менять не src картинки, а позицию бекграунда.

Написание и доработка скриптов (PHP, MySQL, JavaScript, jQuery) (/ru/forum/811046)
AN
На сайте с 23.06.2014
Offline
8
#2
дани мапов:
Надо не две картинки подгружать, а спрайт сделать из двух. Спрайт - фоном. И при наведении менять не src картинки, а позицию бекграунда.

так изначально и планировал, даже создал спрайт и все подцепил. Но проблема вылезла в правилах позиционирования. Мне надо удерживать картинку в центре

У меня img фоном, в него входят два дива с кнопками. если делать спрайтом, то он выводит первой картинкой сразу три. При hover выходит картинка, но она улетает вправо. Попытка сделать правильно не удалась. Если подскажите в чем может быть проблема, буду очень рад.

LEOnidUKG
На сайте с 25.11.2006
Offline
1762
#3
В залитом примере белого блика нет. Но он есть на сайте.

И что тогда нам тестировать?

О каком браузере идёт речь? Может быть кэширование картинок выключено?

✅ Мой Телеграм канал по SEO, оптимизации сайтов и серверов: https://t.me/leonidukgLIVE ✅ Качественное и рабочее размещение SEO статей СНГ и Бурж: https://getmanylinks.ru/ ✅ Настройка и оптимизация серверов https://getmanyspeed.ru/
AN
На сайте с 23.06.2014
Offline
8
#4
LEOnidUKG:
И что тогда нам тестировать?

О каком браузере идёт речь? Может быть кэширование картинок выключено?

В chrome глюк, кеширование не включено. Может быть проблема в jQuery 1.8.3

LEOnidUKG
На сайте с 25.11.2006
Offline
1762
#5
Amadey_n:
В chrome глюк, кеширование не включено. Может быть проблема в jQuery 1.8.3

только в хроме? В других всё ок? Хром последний?

Включите кэширование картинок на всякий случай и протестируйте с ним.

Jor
На сайте с 23.06.2012
Offline
42
Jor
#6
Amadey_n:
так изначально и планировал, даже создал спрайт и все подцепил. Но проблема вылезла в правилах позиционирования. Мне надо удерживать картинку в центре

У меня img фоном, в него входят два дива с кнопками. если делать спрайтом, то он выводит первой картинкой сразу три. При hover выходит картинка, но она улетает вправо. Попытка сделать правильно не удалась. Если подскажите в чем может быть проблема, буду очень рад.

Спрайты в столбец размещали?

http://jsfiddle.net/hnwspgzf/

AH
На сайте с 22.01.2015
Offline
9
#7

Киньте ссылку на сам сайт посмотреть?

А вообще такой эффект лучше делать через трансформацию объекта.

Разработка и продвижение сайтов (http://housevl.ru/) Хостинг VPS - RAM: 1024 Mb, SDD: 20 Gb, CPU: 2270 МГц (KVM) за 328 руб. (https://bill.develhoster.ru/mancgi/partnerprogram?partner=1430&project=2)
[Удален]
#8

AlexHouse, она есть в первом сообщении...

AN
На сайте с 23.06.2014
Offline
8
#9
Jor:
Спрайты в столбец размещали?

http://jsfiddle.net/hnwspgzf/

Размещал в строку. Спасибо за помощь!

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий