hoverした時に疑似要素で画像やテキストを出現させる。

↑アイキャッチ画像の様に、hoverした時に画像や文字が出現するようにしたいのですが、どんなやり方がありますでしょうか?

ぱっと思いついたのはcssで疑似要素です。これでいけますでしょうか?
あとは、jQueryで適当なのがあるのかなあ。

よろしくお願いします。

2013-06-21の勉強会で「hoverした時に疑似要素で画像やテキストを出現させる。」が出来ました!

僕のサーバーにアップしました。タカハシ先生ありがとうございました!

http://nobu-69.com/study/after_201306/after.html

IE8対策

いろんなブラウザで確認しましたが、ie8は、ホバーもしてないのに↓こうなって(全部見えている)しまいます。(ちなみにie7はホバーしても疑似要素が出現しませんが、今回は切り捨てます。ie9はtransformが効きませんが、ホバーで疑似要素が出現するのでOKとします。)
ie8

ie8だけが読み込むie8.cssを作り以下を指定。

もとがこんな感じ

ie8用css

nav ul li a:hover:afterは上書きされますが、nav ul li a:afterの方は何にも指定がないので上書きされません。この場合どうしたらよいでしょうか?
気持ち的にはnav ul li a:after{all-clear}こんなのあったらいいなあ。

以下を追加することで無事解決!

firefox等に悪影響とかはありません

というわけで、ie8用にcssを作成して、それでどうにか問題解決するという作戦は無しになりました。そんな事をしなくても上記のコードを追加するだけで、解決したからで~す。

カテゴリー: 質問と回答 | タグ: , , | 投稿日: | 投稿者:
真中のぶ

真中のぶ について

The B.B.BoogieというバンドでVocalをしています。サーフィンもします。シングルフィンのクラッシックなロングボードに乗っています。ウェブデザイナーでもあります。タカハシ先生の一番弟子ですが時々すっとこどっこいな質問をして校庭10周と言われます。「パソコン倶楽部りんご」は僕が命名しました。ジョブズさんに敬意を表して。好きなcssはmargin{0 auto;}

hoverした時に疑似要素で画像やテキストを出現させる。」への9件のフィードバック

  1. タカハシ先生タカハシ先生

    私もパッと思いついたのはcssの疑似要素です。疑似要素には content : url( “imageへのpass” );と書けば画像も出せます。

    hover のタイミングで画像を読み込むよりも、あらかじめ、疑似要素 は用意しておいて、通常は隠しておき、
    hover したら出現させるのが良いと思います。

    返信
  2. ピンバック: 2013-6-21 勉強会 | パソコン倶楽部りんご

  3. ピンバック: hoverした時に疑似要素で画像やテキストを出現させる。ie8 | パソコン倶楽部りんご

  4. ピンバック: hoverした時に疑似要素で画像やテキストを出現させる。ie8 | パソコン倶楽部りんご

    1. タカハシ先生タカハシ先生

      疑似要素を上書きして、なかった事にしたい場合は、上書きする指定の方で、
      content : none;
      を書きます。

      で、それはそれとして、IE8で起きる不具合は、hover していない時にも見えている、ということですか?
      そうならば、IE8用じゃない、共通のcssの nav ul li a:after に
      height : 0;
      overflow : hidden ;
      を追加して、共通のcssの nav ul li ahover:after に
      height : auto;
      を追加するので良いかも(確認はしてません)

      返信
      1. 真中のぶ真中のぶ 投稿作成者

        先生の予想どおりの方法で直りました。
        何時間もあーだこーだやりましたが、たった3行で解決するとは!!

        先生、ありがとうございました。

        みなさん、対策内容を記事の本文に追加しておきます。ご確認ください。

        返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA