今日もランサーしょうじさんとsa-kaさんは、お休みです。寂しいなあ。お菓子は少なめ。
本日の内容は
- IEの印刷プレビューについて
- html5で作るWPオリジナルテーマ：2
でした。 続きを読む
2013-6-14 勉強会
コメントをどうぞ
日別アーカイブ: 2013年6月20日
html5で作るWPオリジナルテーマ：2
流行に終わらないフラットデザインのポリシー
hoverした時に疑似要素で画像やテキストを出現させる。
↑アイキャッチ画像の様に、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を作成して、それでどうにか問題解決するという作戦は無しになりました。そんな事をしなくても上記のコードを追加するだけで、解決したからで～す。