-
ID:Hk7B0Y さんの質問

IEで擬似要素と擬似クラスの併用について教えてください。
下記のように記述すると、GCでは表示されますが、IE10では表示されません。
.hoge:hover:after {
content:"ああああ";
}
記述の仕方に問題があるのでしょうか？
それとも、IEでは諦めるしかないですか？
解決策があれば、教えて頂けると幸いです。

みんなの回答 1 件

ID:oF7qKe さんの回答

当方IE11なので、ドキュメントモードをIE10にして試してはみましたが、参考にはならないかもしれません。すみません。

で、IE10モードで
.hoge:hover:after を試してみましたが、ちゃんと content は表示されました。
after擬似要素の挿入される位置がHTMLの妥当性違反ではないかお確かめください。
もしくはセレクタを .hoge:hover::after としてみるとか。
ID:Hk7B0Y

回答ありがとうございます。
他の記述に問題があるのかと思い、空のページを作成して試して見ましたが、表示されないです；
コロン2つも試して見ましたがダメでした。
ちなみに.hoge:hoverと.hoge:afterだとそれぞれ動作しますが、併用すると何の反応もしません・・・

ID:oF7qKe

お役には立てませんでしたか…。
手元に純粋なIE10の環境がないので私にはこれ以上はよく分からないですね。

無理矢理になってしまいますが、
<div class="wrap">
<style scoped>
.hoge + span { display: none; }
.hoge:hover + span { display: inline; }
</style>
<span class="hoge">ああああ</span>
<span>いいいい</span>
</div>
こういうのは駄目でしょうか？

あるいは、個人的にはあまり好きな解決法ではないですが、JavaScriptを使うのもひとつの方法かと思います。

ID:jpTAWJ

トピ主です。
何度もご回答ありがどうございます。
記述いただいた方法で試してみます。
ありがとうございました。

ID:Hk7B0Y

トピ主です。
記述いただいた方法とは違いますが、
.hoge:hover:after {
}
の前に
.hoge:hover {
}
を記述したら表示されました。
ありがとうございました。

最終更新日:2013-12-19 (9,802 views)

関連するトピックス

ページ上部に戻る