2013-7-26 勉強会のリクエスト 2件の返信 質問というかリクエストです。よく通販サイトで商品の詳細説明のページで大きい画像があって、下に小さい画像が並んでて、小さい画像にマウスをのせると大きい画像に表示されるようになっています、どうなっているのか教えて頂きたいです。 こちらが参考サイトです
真中のぶ 2013年7月26日 9:56 AM タカハシ先生ならCSS3で実装すると思います。 僕は、ちょっとそこまでスキルがないので、そういった類の事を実装する場合、頭に浮かぶのは、 JQueryとcssです。 例えばこのサイト http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_imagegallery の中の「bxGalleryシンプルな画像ギャラリー」 なんて近いのでは? あと、以前僕の質問で、りんごでやったことありましたよ。 確か、まだこのサイトが無かった頃かな。ジェイコさんもやったよ。 こちら http://nobu-69.com/study/nobu_TinySlid_201211/index.html 返信 ↓
タカハシ先生 2013年7月28日 10:31 PM CSSで作って、7-26の勉強会でお見せしました。 http://codepen.io/ksksoft/pen/AaKeb 肝心のhoverの部分は「隣接兄弟セレクタ」を使っています。IE7+で対応。 span:hover + div の部分がそれで、 「hoverしたspanの直後にある、spanと親要素が同じ(=兄弟の)div」ということです。 返信 ↓
タカハシ先生ならCSS3で実装すると思います。
僕は、ちょっとそこまでスキルがないので、そういった類の事を実装する場合、頭に浮かぶのは、
JQueryとcssです。
例えばこのサイト
http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_imagegallery
の中の「bxGalleryシンプルな画像ギャラリー」
なんて近いのでは?
あと、以前僕の質問で、りんごでやったことありましたよ。
確か、まだこのサイトが無かった頃かな。ジェイコさんもやったよ。
こちら
http://nobu-69.com/study/nobu_TinySlid_201211/index.html
CSSで作って、7-26の勉強会でお見せしました。
http://codepen.io/ksksoft/pen/AaKeb
肝心のhoverの部分は「隣接兄弟セレクタ」を使っています。IE7+で対応。
span:hover + div の部分がそれで、
「hoverしたspanの直後にある、spanと親要素が同じ(=兄弟の)div」ということです。