Расширенные css спрайты не работают с: hover? - PullRequest
Новая
       14

Расширенные css спрайты не работают с: hover?

4 голосов
/ 12 января 2009

Я только что столкнулся с этой статьей о расширении css-спрайтов, которая позволяет использовать трюк для спрайтов с изображениями на переднем плане. Я пытался использовать технику на: hover, но она не работает в IE и Opera. Смотрите мою попытку использовать эту технику для меню здесь: http://www.kavoir.com/examples/jenny-css-sprites/menu.html

В FF и Safari он работает правильно, но не работает вообще в IE и Opera. Модифицировал код несколькими способами, но все равно не работает вообще. Может быть, это невозможно?

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

Есть идеи, как заставить это работать во всех браузерах?

Обновление: спасибо за ответы, но: hover для, поэтому я считаю, что все браузеры IE должны отработать эффекты Поэтому проблема может быть связана со свойством clip.

Я просто хочу убедиться, что: hover работает правильно при включенном клипе. Похоже, пока это не так.

Ответы [ 5 ]

4 голосов
/ 14 января 2009

ОК, вот что обнаружило мое исследование (и поправьте меня, если я ошибаюсь): IE поддерживает: hover, но, очевидно, не будет применять его к дочерним элементам.

Итак, я создал обходной путь, используя overflow: hidden и поля, используя текущую разметку. Я бы предположил, что вы все еще можете использовать свойство clip, но для этого может потребоваться другой элемент (хотя, может быть, и нет). Решение находится на здесь и, похоже, работает правильно как в FF, так и в IE6 (не тестировалось в других браузерах).

Кроме того, я хотел бы обратиться к Аннакате, сказав, что кнопки и логотипы меню исторически не были фоновыми изображениями и печатались на распечатках, поэтому спрайсинг CSS изменил это поведение (в пользу производительности).

4 голосов
/ 12 января 2009

Вся описанная техника мне кажется проблематичной.

Очки Дженнифер:

  1. Вы не можете прикрепить альтернативный текст к элементам div в целях доступности
  2. CSS Spriting и исправление IE6 PNG несовместимы
  3. Изображения не будут распечатываться на распечатках, если не выбрана опция клиента для печати фоновых изображений (это плохо для логотипов, меню и т. Д.)
  4. Для изображений на страницах (которые на самом деле не являются фоновыми изображениями) семантически плохо скрывать изображение в CSS.

1, учитывая, что это фоновые изображения, а не семантически сами по себе изображения, я думаю, что правильный подход - поместить этот текст непосредственно в разметку и скрыть его с помощью CSS, а не наоборот.

Номер 2 действителен, но не конец света. Действовать на 3 - это оскорбление, имхо - если пользователь не хочет печатать фоновые изображения, почему вы заставляете это делать? Опять же, это возвращается к семантической интерпретации.

Номер 4 Я полностью согласен с этим, но если вы все равно прячете изображение в конгломерат спрайтового изображения, что вы получаете? Вы могли бы обсудить это, но <img> имеет семантическое значение, представляющее ресурс с URI, и поэтому URI должен быть отличным, не зависящим от интерпретируемого CSS. View / Copy / Save Image будет отрицательно влиять на это.

Это также, кажется, реагирует довольно медленно в моем FF (который по общему признанию подвергается злоупотреблению табуляции), я предполагаю, что математика отсечения требует немалых усилий.

Короче говоря, я думаю, что существующая техника фонового изображения / позиции превосходна.

1 голос
/ 12 января 2009

На самом деле IE поддерживает: hover для ссылок. Я считаю, что проблема здесь заключается в использовании CSS-свойства «Clip». Я бы предложил поискать другое решение, это обычное дело, и для его отладки может потребоваться больше времени, чтобы попробовать другой подход.

1 голос
/ 12 января 2009

Какую версию IE вы используете?

:hover не должен работать на более старых версиях IE (IE7 должен поддерживать этот псевдокласс).

В этой статье " IE CSS Hover Fix " перечислены некоторые методы, используемые для правильной работы :hover, например, собственная функция выражения IE или HTC (компонент HTML).

0 голосов
/ 14 января 2009

Вот как я обычно делаю свои CSS-спрайты без дочернего тега IMG внутри тега A:

HTML: 

<div class="menu">
    <a href="#">foo</a>
    <a href="#">foo</a>
</div>

CSS: 

/* you need to specify its height and width so that they fit with the part of the sprite you want to show */
.menu a{display:block;width: 100px; height: 100px; float:left; margin-right: 10px; text-indent: -9999px;}
/* the background-position is set to top. */
.menu a{background: url(../images/whatever.png) no-repeat top center;} 
/* the background-position is set to bottom. */
.menu a:hover{background-position: bottom center;}

ваш файл what.png будет иметь высоту 200 пикселей с обоими состояниями.

Вот и все

...