div: hover по-разному меняет положение изображения в разных браузерах - PullRequest
Новая
       1

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

2 голосов
/ 10 мая 2011

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

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

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

Ответы [ 4 ]

0 голосов
/ 10 мая 2011

Нет необходимости использовать 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%; }

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

0 голосов
/ 10 мая 2011

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

a div {
    line-height: 0;
}
0 голосов
/ 10 мая 2011

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

Просто добавьте или вычтите пиксель к вашим изображениям на оси, имеющей длину нечетного числа, чтобы сделать их четным числом (т.е. - вместо 100x123, сделайте его 100x124), и вы должны быть золотыми.

0 голосов
/ 10 мая 2011

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

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

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

...