[楽天][IE][iframe]IEでiframeにhoverが効かない。

###前提・実現したいこと
IE10以降のバージョンにてiframeにhoverの機能を持たせたい。
楽天という都合上jsの類が使用できません。
CSSのみでの打開策をお持ちの方がいらっしゃいましたらお力を貸していただきたいです。

###発生している問題・エラーメッセージ
iframe内にドロップダウンのグローバルナビを設置しています。
iframeの高さ以上に表示ができないため、hoverの際に高さを変更する形で
実現を試みましたところ、IEでのみiframeにhoverが効かないことが発覚しました。

###ソースコード

HTML
1<div class="header_frame">
2<iframe src="module/header.html" scrolling="no" frameborder="0"></iframe>
3</div>

CSS
1.header_frame {
2	z-index:9999;
3	position:absolute;
4	top:0;
5	left:0;
6	width:100%;
7}
8
9.header_frame iframe{
10	width:100%;
11	height:40px;
12	position:absolute;
13	top:0;
14	left:0;
15	z-index:9999;
16}
17
18.header_frame iframe:hover{
19	width:100%;
20	height:260px;
21	position:absolute;
22	top:0;
23	left:0;
24	z-index:9999;
25}

###補足情報
楽天の店舗という都合上jsの類を読み込ませることが出来ません。
iframeの中にでしたらjsを読み込ませることは可能ですが、
何か解決策にお心当たりのある方はお力をお貸しいただきたいです。

宜しくお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

いっそのこと iframe の背景を透過させて常に開いてしまうと言う方法はいかがでしょうか。
直後の要素が当然クリックできませんが、メニューの直下に重要なボタンが来ることも考えにくいので、デザインで処理できるような気がします。

RMS

HTML
1<div class="header_frame">
2<iframe src="module/header.html" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
3</div>

CSS
1.header_frame,
2.header_frame iframe {
3    width:100%;
4    height:260px;
5    z-index:9999;
6    position:absolute;
7    top:0;
8    left:0;
9}
10.header_frame {
11    margin-bottom: -220px;
12}

header.html

CSS
1html, body {
2     background-color:transparent;
3}

JavaScriptを使用する以外の方法でいくつか試してみましたが、どれもメニュー向きではなかったので飛び道具です。（ .header_frame に ::after擬似要素をかぶせて :hover を拾ってみたのですが、iframe 内のボタンをまともに押せませんでした）

投稿2016/04/01 20:26

編集2016/04/01 20:31

kei344

総合スコア69400

zeele001

2016/04/13 07:30

ご回答ありがとうございます。デザイン上で直下の要素にリンクなどを置かない形で対処するしかないですかね… もしくは下で回答いただいているようにプレーンなHTMLとCSSで対応するか… :targetや:focus、:before:afterなどなどいろいろ試しておりますが、なかなか難しいですね、文字数の制限上iframeで対処したいところでしたが…

zeele001

2016/04/13 07:34

飛び道具部分、もしお手間でなければご教示いただきたいです。

kei344

2016/04/13 07:43

回答自体が「飛び道具」というつもりでした、期待させたようで申し訳ない。

zeele001

2016/04/18 09:52

なるほど、ありがとうございました。

行動規範の内容に同意します

どちらかというとCSSのみでドロップダウンを実現する方が筋がよろしいかと思います。

簡単に調べるだけでも、以下のようなサイトが見つかります。

とはいえ、IEもバージョンによってCSS対応度が異なります。（IEについてどうしてもという場合には、バージョンを明記していただくと回答しやすいかなと思います。）

投稿2016/03/22 15:20

amaranthine

総合スコア501

zeele001

2016/03/22 15:50

ご回答ありがとうございます。 IE10までを想定しております。おっしゃる通りプレーンなhtmlとCSSで挙動の実現は可能なのですが、楽天という都合上文字数の制限や更新性の向上などの兼ね合いで、iframeでの導入をどうにか実現したい。という状況にございます。何かまたお持ちの打開策がありましたらお力を貸していただけると幸いです。

行動規範の内容に同意します

あなたの回答