web-dev-qa-db-ja.com

：not（：hover）と：hoverは、アクセス可能な要素を非表示にする安全な方法ですか？

特定のページ要素をたとえばホバー。例としては、stackoverflowの「フィードバック-この投稿は役に立ちましたか？」-ウィジェットです。これらの要素はインターフェースにとって重要である可能性があるため、そのようなshow-on-hover-featureはプログレッシブエンハンスメントであるか、他の用語では目立たず、グレースフルにデグレードする必要があります。

通常の方法は、javascriptを使用しているように見えます。要素を非表示にし、親要素がホバーされたときに使用できるようにします。その理由は_:hover_である可能性があります。これは、特にレガシーブラウザーですべての要素をサポートしていないため、最初にcss2まで要素を非表示にすることを禁止しているためです。 （js/jQueryの例については、cf。 ホバー上の要素を表示するjquery ）

純粋なcss3で:not(:hover)と_:hover_を使用して、古いブラウザーに影響を与えずに、このような機能を安全に実現できるかどうか疑問に思います。私が見る限り、要件は:not()をサポートするすべてのブラウザーがすべての要素に対して_:hover_をサポートする必要があることです。次の情報源によると、そうであると思われます

実装例： http://jsfiddle.net/LGQMJ/

どう思いますか？異議やその他の情報源はありますか？

*安全には、ブラウザは最後の手段としてすべての要素を常に表示する必要があることを意味します。

csscss3hovercss-selectorsprogressive-enhancement
32
Richard Kiefer

あなたのソリューションはCSS3に申し分なく見えます。 opacityプロパティはとにかくそれをサポートしていないブラウザーによって適用されることはないので、現代のブラウザーのソリューションを改善するために考えられることは何もありません。

a以外の要素で_:hover_がサポートされていないIE6とNN4（およびそれ以前）以外には、文字通り他のブラウザーはありません。あなたの質問に暗示されているように、:not()をサポートするすべてのブラウザは_:hover_も完全にサポートすることが知られています。

とは言っても、IE7とIE8はホバー効果を逃してしまうことになりますが、ホバー効果はまだ一般的です。おそらくIE6もサポートしたいと考えていますが、必要に応じてこれらの懸念に対処できると思われるソリューションを以下に示します。

  1. :not(:hover)を省略すると、_:hover_、andを使用して、最初のセレクターが2番目のセレクターに等しく固有ではなく、固有性が低くなります。 :not()をサポートしていないが、すべての視覚要素で_:hover_をサポートしているIE7およびIE8に連絡できます。

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

  2. visibilityプロパティの代わりにopacityプロパティを使用して、CSS3 opacityをサポートしないIE7およびIE8にアクセスします。

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

    _visibility: hidden_は要素をマウスオーバーからも非表示にしますが、この場合は子要素に適用しているため、親はマウスオーバーからも表示されたままになることに注意してください。

  3. IE6ではサポートされていないがIE7およびIE8ではサポートされているCSS2/3コンビネーターを使用します（子_>_、隣接する兄弟_+_、一般的な兄弟_~_）。これは「hacky」に似ていますが、あなたの状況は、子コンビネーター_>_が非常によく適合するため、有名な_html > body_フィルターのようにハッキングされるのではなく、有機的に統合できます：

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

更新されたフィドル

22
BoltClock