↑アイキャッチ画像の様に、hoverした時に画像や文字が出現するようにしたいのですが、どんなやり方がありますでしょうか？
ぱっと思いついたのはcssで疑似要素です。これでいけますでしょうか？
あとは、jQueryで適当なのがあるのかなあ。
よろしくお願いします。
2013-06-21の勉強会で「hoverした時に疑似要素で画像やテキストを出現させる。」が出来ました！
僕のサーバーにアップしました。タカハシ先生ありがとうございました！
IE8対策
いろんなブラウザで確認しましたが、ie8は、ホバーもしてないのに↓こうなって（全部見えている）しまいます。（ちなみにie7はホバーしても疑似要素が出現しませんが、今回は切り捨てます。ie9はtransformが効きませんが、ホバーで疑似要素が出現するのでOKとします。）
ie8だけが読み込むie8.cssを作り以下を指定。
もとがこんな感じ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
nav ul li a:after{ content:url(img/nav_menu/price.png); position:absolute; left:-1em; top:-2em; transform:scale(1,0) translate(0,-1em); transform-origin:left bottom; transition:0.3s; z-index:-1; opacity:0; } nav ul li a:hover:after{ transform:scale(1,1) translate(0,0); opacity:1; } |
ie8用css
|
1 2 3 4 5 6 7 8 |
nav ul li a:after{ } nav ul li a:hover:after{ content:url(../img/nav_menu/price.png); position:absolute; left:-1em; top:-2em; } |
nav ul li a:hover:afterは上書きされますが、nav ul li a:afterの方は何にも指定がないので上書きされません。この場合どうしたらよいでしょうか？
気持ち的にはnav ul li a:after{all-clear}こんなのあったらいいなあ。
以下を追加することで無事解決！
firefox等に悪影響とかはありません
|
1 2 |
nav ul li a:after{height:0;overflow:hidden;} nav ul li a:hover:after{height:auto;} |
というわけで、ie8用にcssを作成して、それでどうにか問題解決するという作戦は無しになりました。そんな事をしなくても上記のコードを追加するだけで、解決したからで～す。
私もパッと思いついたのはcssの疑似要素です。疑似要素には content : url( “imageへのpass” );と書けば画像も出せます。
hover のタイミングで画像を読み込むよりも、あらかじめ、疑似要素 は用意しておいて、通常は隠しておき、
hover したら出現させるのが良いと思います。
疑似要素。理解してる範囲で頑張ってみます。
明日の勉強会で見て下さい。
よろしくお願いします！
————————————
やってみました。とほほ。
http://nobu-69.com/study/after/after.html
勉強会で分らなかった方、記事の本文を追加しました。見て下さーい。
ピンバック: 2013-6-21 勉強会 | パソコン倶楽部りんご
ピンバック: hoverした時に疑似要素で画像やテキストを出現させる。ie8 | パソコン倶楽部りんご
ピンバック: hoverした時に疑似要素で画像やテキストを出現させる。ie8 | パソコン倶楽部りんご
ie8についての記事を追加して質問させていただきました。
疑似要素を上書きして、なかった事にしたい場合は、上書きする指定の方で、
content : none;
を書きます。
で、それはそれとして、IE8で起きる不具合は、hover していない時にも見えている、ということですか？
そうならば、IE8用じゃない、共通のcssの nav ul li a:after に
height : 0;
overflow : hidden ;
を追加して、共通のcssの nav ul li ahover:after に
height : auto;
を追加するので良いかも（確認はしてません）
先生の予想どおりの方法で直りました。
何時間もあーだこーだやりましたが、たった３行で解決するとは！！
先生、ありがとうございました。
みなさん、対策内容を記事の本文に追加しておきます。ご確認ください。