32

特定のページ要素をホバーなどでのみ表示できるようにすると便利な場合があります。例として、stackoverflow の「フィードバック - この投稿は役に立ちましたか?」ウィジェットがあります。これらの要素はインターフェースにとって重要である可能性があるため、このようなホバー表示機能は漸進的な拡張である必要があります。つまり、目立たず、適切に劣化する必要があります。

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

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

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

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

*念のために言うと、ブラウザーは常に最後の手段としてすべての要素を表示する必要があるということです。

4

1 に答える 1

22

あなたのソリューションは CSS3 に適しています。opacityいずれにせよ、それをサポートしていないブラウザーによってプロパティが適用されることは決してないため、最新のブラウザーのソリューションを改善するために私が考えることができるものは何もありません。

IE6 と NN4 (およびそれ以前)以外に、 :hoveron 以外の要素をサポートしていないブラウザーは文字通りありませんa。あなたの質問に暗示されているように、サポートするすべてのブラウザーは:not()、:hover.

そうは言っても、IE7 と IE8 ではホバー効果を逃してしまうことになり、後者は依然としてかなり普及しています。おそらくIE6のサポートも検討しているでしょうが、必要に応じて、これらの問題に対処できると思われる解決策を次に示します。

  1. 完全に省略:not(:hover)して、最初のセレクターが で 2 番目のセレクターに等しく限定されるのではなく、特定性が低くなり:hover、すべての視覚要素をサポートしていないがサポートしている IE7とIE8 にアクセスできます。:not():hover

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

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

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

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

  3. IE6 ではサポートされていないが、IE7 と IE8 ではサポートされている CSS2/3 コンビネータ ( child >、隣接する兄弟+、一般的な兄弟~) を使用して、両方のルールを IE6 から隠します。これは「ハッキー」に接していますが、あなたの状況は子コンビネーターが非常にうまく適合する状況であるため、有名なフィルター>のようにハッキングされるのではなく、有機的に統合できます。html > body

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

更新されたフィドル

于 2012-03-16T12:28:45.060 に答える