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

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

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

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

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

Как вы думаете? Любые возражения или другие источники?

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

Ответы

Ответ 1

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

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

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

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

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

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

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

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

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

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

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