Is：not（：ホバー）と：アクセス可能な要素を隠す安全な方法に乗る？

Question

場合によっては、特定のページ要素のみが表示されるようにすると便利です。ホバース。例としては、stackoverflowの "feedback - この投稿はあなたにとって有用でしたか？" - ウィジェットです。これらの要素がインタフェースにとって重要な場合があるため、そのようなショー・オン・ホバーオーバー機能は、プログレッシブな強化でなければならず、他の点では邪魔にならず、優雅に低下するはずです。

通常の方法は、javascriptを使用しているようです。要素を隠し、親要素が上がったときに利用できるようにします。この選択の理由は:hoverであり、特にレガシーブラウザのすべての要素をサポートしていないため、最初にcss2まで要素を隠すことが禁じられています。私は疑問に思う

（JS/jQueryの例を参照jquery showing elements on hoverのために）あなたは古いブラウザに影響を与えない、:not(:hover)と:hoverを使用して、純粋なCSS3で安全*このような特徴を達成することができます。私が見る限りでは、すべての要素に対して:not()をサポートするすべてのブラウザが:hoverをサポートしなければならないという要件があります。以下の情報源によると、ケース

• http://www.quirksmode.org/css/contents.html
• http://kimblim.dk/css-tests/selectors/

実装例のように見えるもの：http://jsfiddle.net/LGQMJ/

あなたはどう思いますか？異議申し立てやその他の情報源？

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

Answer 1

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

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

つまり、IE7とIE8をホバー効果で欠けてしまうことになります。後者はまだまだ普及しています。あなたは、おそらく同様にIE6をサポートするために探しているが、ここで私はあなたがそれを必要とする場合、これらの問題に対処すると信じてソリューションです：

1. 省略:not(:hover)は完全にあなたの最初のセレクタが少なく、特定のではなく、にも同様に特定になるようにすべての視覚的要素でサポート:hoverを:not()をサポートしますが、実行しないあなたはIE7とIE8に手を差し伸べることができ:hover、とを使用して第2のセレクタ：

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

2. 使用visibility代わりにCSS3 opacityをサポートしていません。これはIE7とIE8に手を差し伸べるためにopacityプロパティのプロパティ：

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

   visibility: hiddenが同様にマウスオーバーする要素が見えなくなることに注意してくださいが、この場合では、あなた」これを子要素に適用すると、親はマウスオーバーに見えるようになります。

3. IE6はサポートしていませんが、IE7とIE8がIE6からの両方のルールを非表示にする（子>、隣接兄弟+、一般的な兄弟~）を行う使用CSS2/3コンビネータ。上のこのボーダー「ハック」が、あなたの状況は、子コンビネータ>は非常によく合うものなので、それが有機的に統合ではなく、有名なhtml > bodyフィルタのようでハッキングすることができます。

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

Updated fiddle