Блог

Главная - Вопросы по программированию - div: позиции наведения по-разному меняют изображение в разных браузерах

div: позиции наведения по-разному меняют изображение в разных браузерах

#css #hover

#css #наведите

Вопрос:

Я использовал правило CSS div: hover для достижения желаемого эффекта — изображение «меняется местами» при наведении курсора мыши на изображение навигации: www.scottmccarthydesign.com/dev.index.html

Моя настройка здесь, однако, на самом деле не является «подкачкой». Основное навигационное изображение представляет собой сглаженный jpeg всего рабочего стола (для более быстрой загрузки), и над каждым элементом на рабочем столе есть пустые разделы для сопоставления изображения со ссылками. При наведении курсора мыши на эти пустые разделы, правило div: hover заполняет div файлом .png, который предназначен для размещения точно над изображением основного рабочего стола, чтобы создать эффект подкачки изображений.

Это прекрасно работает в Firefox, но я не понимаю, почему Safari позиционирует изображение :hover над столом иначе, чем Firefox — каждое изображение: hover отклонено примерно на 1 пиксель, из-за чего кажется, что отдельные изображения на столе на самом деле немного смещаются при наведении курсора мыши. Есть предложения??

Ответ №1:

У меня возникли проблемы с использованием :hover псевдокласса для элементов, отличных от <a></a> . Вы могли бы использовать (jquery / javascript), чтобы изменить класс указанных событий <div> using onmouseover и onmouseout .

С помощью onmouseover добавьте класс, который определяет определенное фоновое изображение. С помощью onmouseout удалите этот класс.

Еще проще, используйте jquery .hover()

Комментарии:

1. Только IE6 не нравится :hover ни на чем, кроме привязок. Остальные на самом деле работают хорошо.

Ответ №2:

переместите ваши ссылки после добавления этого в ваш css:

 a div {
    line-height: 0;
}

Ответ №3:

Я сталкивался с этой проблемой раньше и обнаружил, что это связано с размером изображения. Когда размер изображения в одном из его измерений равен нечетному числу пикселей, вычисления, выполняемые Firefox и Chrome / Safari (особенно при использовании center ), немного отличаются. По сути, это связано с субпиксельным округлением.

Просто добавьте или вычтите пиксель к вашим изображениям на оси, длина которой имеет нечетное число, чтобы сделать их четным числом (т. Е. вместо 100×123 сделайте его 100×124), и вы должны быть золотыми.

Ответ №4:

Нет необходимости использовать Javascript, этого, безусловно, можно достичь, используя только CSS. На мой взгляд, лучше всего использовать технику, описанную в этой статье о CSS-спрайтах: http://www.alistapart.com/articles/sprites .

По сути, для каждого элемента на вашем столе поместите наведенное и не наведенное изображение в одно изображение, одно поверх другого, так, чтобы верхняя область находилась в состоянии без наведения, а нижняя область — в состоянии наведения. Ваш код, вероятно, будет выглядеть следующим образом:

 div#keyboard2 {
    position: absolute;
    left: 89px;
    top: 256px;
    width: 67px;
    height: 160px;
    background: url(../images/keyboard.png) 0 0 no-repeat;
}
#keyboard2:hover { background-position: 0 100%; }

Тогда изображение вашего рабочего стола будет пустым, а часть ваших элементов будет просто поверх него.