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

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

32 голосов
/ 16 марта 2012

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

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

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

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

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

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

1 Ответ

22 голосов
/ 16 марта 2012

Ваше решение выглядит хорошо для 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;
}

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

...