Является ли :not(:hover) и :hover безопасным способом скрыть доступные элементы?

Иногда бывает полезно сделать определенные элементы страницы видимыми только, например. парит. Примером может служить виджет stackoverflow «обратная связь — был ли этот пост полезен для вас?». Поскольку эти элементы могут иметь решающее значение для интерфейса, такая функция отображения при наведении должна быть прогрессивным улучшением или, другими словами, ненавязчивой и изящно деградировать.

Обычный способ, по-видимому, использует javascript, например. скрыть элементы и сделать их доступными при наведении курсора на родительский элемент. Причиной такого выбора может быть :hover поддержка не всех элементов, особенно в устаревших браузерах, что запрещает вам скрывать элементы в первую очередь вплоть до css2. (для примера js/jQuery см. jquery, показывающий элементы при наведении)

Интересно, можно ли безопасно реализовать такую ​​функцию* с чистым css3, используя :not(:hover) и :hover, не затрагивая старые браузеры. Насколько я понимаю, требование состоит в том, что каждый браузер, поддерживающий :not(), должен поддерживать :hover для всех элементов. Судя по следующим источникам, так оно и есть.

Пример реализации: http://jsfiddle.net/LGQMJ/

Что вы думаете? Есть возражения или другие источники?

* под благополучно я подразумеваю, что браузер всегда должен показывать все элементы в крайнем случае.


css hover css-selectors progressive-enhancement
person Richard Kiefer    schedule 16.03.2012    source источник

Ответы (1)


arrow_upward
22
arrow_downward

Ваше решение выглядит хорошо для CSS3. Я ничего не могу придумать, чтобы улучшить ваше решение для современных браузеров, поскольку свойство opacity никогда не будет применяться браузерами, которые все равно его не поддерживают.

Буквально нет другого браузера, кроме IE6 и NN4 (и старше), без поддержки :hover для элементов, отличных от a. Как следует из вашего вопроса, известно, что все браузеры, поддерживающие :not(), также полностью поддерживают :hover.

Тем не менее, вы в конечном итоге оставляете IE7 и IE8 без эффекта наведения, последний из которых все еще довольно распространен. Вы, вероятно, также хотите поддерживать IE6, но вот решение, которое, я считаю, решит эти проблемы, если оно вам понадобится:

  1. Полностью опустите :not(:hover), чтобы ваш первый селектор стал менее конкретным, а не столь же конкретным для вашего второго селектора с :hover, и вы можете обратиться к IE7 и IE8, которые не поддерживают :not(), но поддерживают :hover на всех визуальных элементах. элементы:

    div span.question {
    opacity: 0;
}
div:hover span.question {
    opacity: 1;
}

  2. Используйте свойство visibility вместо свойства opacity, чтобы обратиться к IE7 и IE8, которые не поддерживают CSS3 opacity:

    div span.question {
    visibility: hidden;
}
div:hover span.question {
    visibility: visible;
}

    Имейте в виду, что visibility: hidden также сделает элемент невидимым при наведении курсора мыши, но в этом случае вы применяете его к дочернему элементу, поэтому родитель останется видимым при наведении курсора мыши.

  3. Используйте комбинаторы CSS2/3, которые IE6 не поддерживает, но поддерживают IE7 и IE8 (дочерний >, соседний одноуровневый элемент +, общий одноуровневый элемент ~), чтобы скрыть оба правила от IE6. Это граничит с «хакерством», но в вашей ситуации очень хорошо подходит дочерний комбинатор >, поэтому его можно интегрировать органично, а не взломать, как знаменитый фильтр html > body:

    div > span.question {
    visibility: hidden;
}
div:hover > span.question {
    visibility: visible;
}

Обновленная скрипта

person BoltClock    schedule 16.03.2012
comment
Большое спасибо, Очень подробное дополнение IE. Тем не менее, мы можем пересмотреть непрозрачность для доступа к программам чтения с экрана: "> stackoverflow.com/questions/9056855/ и stackoverflow.com/questions/272360/ Поскольку в моем случае эта функция просто сахар для интерфейса, основное внимание уделялось тому, чтобы не сделать важные элементы интерфейса недоступными. в любом браузере. У вас есть дополнительные источники? - person Richard Kiefer; 19.03.2012
comment
Не совсем, добавлю, если найду :) - person BoltClock; 21.03.2012