質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
hover

これは、HTMLの 擬似クラス[hover]に関するタグです。Hoverは与えられた要素へマウスカーソルを置くことを意味します。また、タッチ可能なデバイスでユーザーが要素へタッチすることをHoverと呼ぶ場合もあります。

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

4113閲覧

footerをhoverでframeを表示。 ieだけiframe上にマウスhoverするとユラユラゆれてクリックできない。JS、JQで対応策をお願いします。

rrryo719719

総合スコア13

hover

これは、HTMLの 擬似クラス[hover]に関するタグです。Hoverは与えられた要素へマウスカーソルを置くことを意味します。また、タッチ可能なデバイスでユーザーが要素へタッチすることをHoverと呼ぶ場合もあります。

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

2クリップ

投稿2015/06/25 10:34

編集2015/06/25 10:39

こんにちは。

表題の件、たいへん困っております。
コードをまるごとコピペしてご覧ください。
下部に横広いfooterをマウスhoverすると、上に伸び、3つのiframe表示されるのでクリックでそのページに飛べるようにしたいのです。
Chome、FFは問題ないのですが、ieだけiframe上にhoverするとユラユラして、クリックできません。

■jsでの対策、またはコードの記述による対応策
■スマホ表示でhoverはPCのようにマウスポイントをずらしても閉じないので、右上に「×マーク」をつけてfancyboxのように閉じれるようにしたい。

以上2点、対応策をお願い致します。

※footer上部は実際にはfb、insta、youtubeのマーク画像が入っています。
※現在のiframe内容はダミーです。

初心者なので、、言葉の説明だけでなくコードでいただけると助かります。
宜しくお願い致します。

lang

1<html> 2<head> 3 4</head> 5 6<style> 7/*footer ▼-*/ 8#timeline{ 9 margin-left:50px; 10 margin-top:0px; 11 padding-top:0px; 12 background:#FFFFFF; 13 } 14 15#snapwidget{ 16margin-left:10px; 17} 18 19#youtube{ 20padding-top:0px; 21 margin-top:0px; 22margin-left:7px; 23} 24 25 26 27/*fb,insta,youtube 28マークの場所配置 ▼*/ 29#facebook { 30 margin-left:1000px; 31 margin-bottom:0px; 32 padding-bottom:0px; 33 margin-top:3px; 34 } 35#copyright{ 36 padding-top:0px; 37 margin-top:0px; 38 margin-right:46px; 39 float:right; 40} 41 42 43 44/*footer クラスhover 色の設置▼*/ 45footer.hover{ 46 47 position: fixed !important; 48 position: absolute; 49 width:100%; 50 bottom:0px; 51 background:#CCC; 52 background: linear-gradient(#a9a9a9 0%, #fff 40%); 53 /*Chrome Safari用*/ 54 background: -webkit-linear-gradient(#cccccc 0%, #fff 40%); 55 /*Forefox用*/ 56 background: -moz-linear-gradient(#ccc 0%, #fff 40%); 57 /*Opera*/ 58 background: -o-linear-gradient(#ccc 0%, #fff 40%); 59 /*IE6-9用*/ 60 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff',GradientType=0 ); 61 /*IE10用*/ 62 background: -ms-linear-gradient(#ccc 0%, #fff 40%); 63 opacity: 0.9; 64 height:40px; 65 -moz-transition: 0.5s linear; 66 -webkit-transition: 0.5s linear; 67 transition: 0.5s linear; 68} 69 70/*footerをhoverした時 伸びる高さ*/ 71 72 73footer:hover{ 74 height:365px; 75 76 77} 78/*footer ▲-*/ 79</style> 80 81<body> 82 83<!--footer ▼--> 84<footer class="hover"> 85<!-- facebookマーク画像の設定 --> 86<img id="facebook" src="images/facebook2.png" width="35" height="35"alt="cloud"/> 87<!-- timeline --> 88 <iframe id="timeline" src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhazukikouei&amp;width=500&amp;height=300&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=true&amp;show_border=false&amp;appId=745976198821640" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:300px;" allowTransparency="true"></iframe> 89 90<!-- Insta SnapWidget --> 91<iframe src="http://snapwidget.com/in/?u=eXVraWFveWF8aW58MTI1fDJ8Mnx8bm98Mnxub25lfG9uU3RhcnR8eWVzfG5v&ve=250615" title="Instagram Widget" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:224px; height:305px"></iframe> 92 93<!-- youtube --> 94<iframe id="youtube" width="500" height="303" src="https://www.youtube.com/embed/2v9GnDiBGyQ" frameborder="0" allowfullscreen></iframe> 95<p id="copyright">©2014aaaaa.All Rights Reserved</p> 96 97</footer> 98 99 100<!--footer ▲--> 101</body> 102</html>> 103コード

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

以下にコードを示します。

lang

1//ユーザエージェントを利用 2var ua = { 3 iPhone : navigator.userAgent.toLowerCace().indexOf('iphone') != -1, 4 iPad : navigator.userAgent.toLowerCase().indexOf('ipad') != -1, 5 iPod : navigator.userAgent.toLowerCase().indexOf('ipod') != -1, 6 android : navigator.userAgent.toLowerCase().indexOf('android') != -1, 7 windows : navigator.userAgent.toLowerCase().indexOf('windows phone') != -1 8} 9$(function(){ 10 //ホバー処理 11 $("footer").hover(function(){ 12 $(this).animate({"height":395},"fast"); 13 }, 14 function(){ 15 $(this).animate({"height":40},"fast"); 16 }); 17 //スマートデバイスを判定 18 if(ua.iPhone || ua.iPad || ua.iPod || ua.android || ua.windows){ 19 $("閉じるマークのセレクタ").show(); 20 } else { 21 $("閉じるマークのセレクタ").hide(); 22 } 23 //閉じるタップイベント 24 $("閉じるマークのセレクタ").on("tap", function(e){ 25 $("footer").animate({"height":40},"fast"); 26 }); 27});

jQueryを利用しています。最低でも1.7以上を使用してください。
分からなければ、コメントください。

投稿2015/06/26 03:51

orange0190

総合スコア1698

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rrryo719719

2015/06/26 09:03

ShunsukeIzui さん こんにちは。ご回答いただき、ありがとうございます。 以下のように記述、jquery1.7.1も読み込みましたが、iframe上のユラユラは止まりません・・・。また、頂いたコード(//ホバー処理のところ)heightが395になっていたので、実際の高さの365にしてみましたが、ダメでした。 あと、//閉じるタップイベント」に関しては、右上には×印はつかないようですが、スマホで表示された場合はタップで閉じるという認識で宜しいでしょうか。できれば×印もつけたいのですが・・・。 お手数ですが、再度ご教示くださいますよう、お願い致します。 Ryoko Sato ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <!doctype html> <html> <head> <script type="text/javascript" src="jquery-1.7.1.js"></script> <script> //ユーザエージェントを利用 var ua = { iPhone : navigator.userAgent.toLowerCace().indexOf('iphone') != -1, iPad : navigator.userAgent.toLowerCase().indexOf('ipad') != -1, iPod : navigator.userAgent.toLowerCase().indexOf('ipod') != -1, android : navigator.userAgent.toLowerCase().indexOf('android') != -1, windows : navigator.userAgent.toLowerCase().indexOf('windows phone') != -1 } $(function(){ //ホバー処理 $("footer").hover(function(){ $(this).animate({"height":365},"fast"); }, function(){ $(this).animate({"height":40},"fast"); }); //スマートデバイスを判定 if(ua.iPhone || ua.iPad || ua.iPod || ua.android || ua.windows){ $("閉じるマークのセレクタ").show(); } else { $("閉じるマークのセレクタ").hide(); } //閉じるタップイベント $("閉じるマークのセレクタ").on("tap", function(e){ $("footer").animate({"height":40},"fast"); }); }); </script> </head> <style> /*footer ▼-*/ #timeline{ margin-left:50px; margin-top:0px; padding-top:0px; background:#FFFFFF; } #snapwidget{ margin-left:10px; } #youtube{ padding-top:0px; margin-top:0px; margin-left:7px; } /*fb,insta,youtube マークの場所配置 ▼*/ #facebook { margin-left:1000px; margin-bottom:0px; padding-bottom:0px; margin-top:3px; } #copyright{ padding-top:0px; margin-top:0px; margin-right:46px; float:right; } /*footer クラスhover 色の設置▼*/ footer.hover{ position: fixed !important; position: absolute; width:100%; bottom:0px; background:#CCC; background: linear-gradient(#a9a9a9 0%, #fff 40%); /*Chrome Safari用*/ background: -webkit-linear-gradient(#cccccc 0%, #fff 40%); /*Forefox用*/ background: -moz-linear-gradient(#ccc 0%, #fff 40%); /*Opera*/ background: -o-linear-gradient(#ccc 0%, #fff 40%); /*IE6-9用*/ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff',GradientType=0 ); /*IE10用*/ background: -ms-linear-gradient(#ccc 0%, #fff 40%); opacity: 0.9; height:40px; -moz-transition: 0.5s linear; -webkit-transition: 0.5s linear; transition: 0.5s linear; } /*footerをhoverした時 伸びる高さ*/ footer:hover{ height:365px; } /*footer ▲-*/ </style> <body> <!--footer ▼--> <footer class="hover"> <!-- facebookマーク画像の設定 --> <img id="facebook" src="images/facebook2.png" width="35" height="35"alt="cloud"/> <!-- timeline --> <iframe id="timeline" src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhazukikouei&amp;width=500&amp;height=300&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=true&amp;show_border=false&amp;appId=745976198821640" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:300px;" allowTransparency="true"></iframe> <!-- Insta SnapWidget --> <iframe src="http://snapwidget.com/in/?u=eXVraWFveWF8aW58MTI1fDJ8Mnx8bm98Mnxub25lfG9uU3RhcnR8eWVzfG5v&ve=250615" title="Instagram Widget" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:224px; height:305px"></iframe> <!-- youtube --> <iframe id="youtube" width="500" height="303" src="https://www.youtube.com/embed/2v9GnDiBGyQ" frameborder="0" allowfullscreen></iframe> <p id="copyright">©2014aaaaa.All Rights Reserved</p> </footer> <!--footer ▲--> </body> </html>
orange0190

2015/06/26 09:56

すみません。 一つ忘れてました。 hoverした時に適用されるccsは外してください。
rrryo719719

2015/06/27 07:37

ShunsukeIzui さん 再度コメントありがとうございます。 上記の「hoverした時に適用されるccsは外してください」とはどのようなことでしょうか? 一応、class=”hover”ではなく<footer>としてみましたが、表示は全く変わらず、やはりiframe上のユラユラは止まりません。以下、私の見解ですが、footerにではなくfooter内のiframeに関してJSを指定する必要があるのでは、と。 下記の方からもヒントはいただきましたが、これでもできない(というか大雑把すぎて記述方法が分からず)でした。 http://umai-bow.hateblo.jp/entry/2014/09/19/232717 これだとiframeに指定しているようなので、ご参考になればと思います。 お忙しい中、たいへんお手数お掛けして申し訳ありません。 宜しくお願い致します。 Ryoko Sato
orange0190

2015/06/27 08:02

footer:hover{ height:365px; } 上記ccsを外してくださいということです。 残念ながら現在の私の状況では今PCを弄れる状態ではないので、上記ccsを外してもダメな場合には、少々時間をください。
rrryo719719

2015/06/27 13:38 編集

何度もコメントありがとうございます。 残念ながら、上記を外してしまうと上に伸びなくなってしまいます。 はい、お時間かかっても構いません。 解決しなければならないので、ご教示お願い致します。 また、閉じるタップイベントの×印に関しては、画像(images/facebook2.png)をタップして閉じるようにできればなくても構いません。 Ryoko Sato
orange0190

2015/06/29 03:26

閉じるイベントは最初に示したコード閉じるタップイベントの部分を次のように改変してできます。 if(ua.iPhone || ua.iPad || ua.iPod || ua.android || ua.windows){ $("#facebook").on("tap", function(e){ $("footer").animate({"height":40}, "fast"); }); } 画像(images/facebook2.png)をタップして閉じています。 hover時の動作について、私の環境では最初に示したコードで動作しています。 すみませんが、実行環境を教えていただけませんか?
rrryo719719

2015/06/29 10:53

ShunsukeIzui さま コメントありがとうございます。 上記のコードでiphoneの動作確認できました。ありがとうございます。 ただし、タップして開きそのまますぐにまたタップすれば閉じるのですが、少し他でピンチアウトしたりすると効かなくなるのはスマホの特性上、しょうがないんでしょうね。 (hoverを使っている他のサイトをiphoneで見ても、効く時と効かない時があるようなので。) 引き続き、iframeの解決法をご教示いただきますよう、お願い致します。 ちなみに環境はpcはwin7、iphoneは5sです。テキストはsublime3を使用しています。 Ryoko Sato
orange0190

2015/06/30 00:51

確認しているIEのバージョンを教えてください。
rrryo719719

2015/06/30 05:11

IE11です。 宜しくお願い致します。
orange0190

2015/07/02 01:47

私もIE11で確認していますが、やはりhover時の動作は私が提示したコードで動きます。 すみませんが、質問に追記する形で現在のコードを書いていただけませんか?
rrryo719719

2015/07/03 08:47

IE11でhoverはできるんです、しかしiframe上にマウスが来るとガタガタゆらゆら動いて、クリックできないということです。 下記の方が書かれているとおりです。IE独特の現象のようです。 コードは最初に提示したものと変わっておりません。 もし、ShunsukeIzui様のIE表示はiframe上でもユラユラしない、ということでしたら IEのブラウザ設定で何かされてきるということも考えられます。 Ryoko Sato
orange0190

2015/07/03 09:23

確認させてください。 「ユラユラする」というのは、footer内のiframe上にマウスカーソルが乗るとfooterが引っ込む現象のことですよね。 jQueryのhover関数は子要素、孫要素には影響を与えません。ですので、私が記述したコードで動くはずなんです。 正直に言って、ギブアップしたい気分になってますが、解決してほしいので、まだ頑張ります。 さて、次にやってみてほしいのは、jQueryを最新バージョンにしてみてください。
rrryo719719

2015/07/03 13:31

ShunsukeIzui さま お手数かけて申し訳ありません。 今までIEには何度も手を焼き、その都度このようなサイトでアドバイスをいただき、どうにか解決してきました。ほとんどがJQで解決できたように思います。 申し訳ありませんがもう少し、お知恵を拝借できればと思います。 さて、下記の件。 「ユラユラする」というのは、footer内のiframe上にマウスカーソルが乗るとfooterが引っ込む現象のことですよね。 →そうです、引っ込もう&戻ろうでユラユラゆれる動きです。中のyoutubeなどがクリックできない状態ということです。 JQ最新バージョンとはjquery-2.1.4.min.js で宜しいでしょうか? jquery-2.1.4.min
orange0190

2015/07/06 00:08

現在jQueryの最新バージョンは1.11.3もしくは2.1.4になります。 1と2の違いはIE8以下をサポートしているかどうかです。 IE8以下の対応が必要な場合には1、必要ない場合には2を選んでください。
rrryo719719

2015/07/06 08:30

はい、IE8以下は完全無視しておりますので、2.1.4でOKですね。
orange0190

2015/07/06 23:49

では、jQueryのバージョンを最新にしてみて、どうなるか教えてください。
rrryo719719

2015/07/08 06:35

最新にしました。現状変わらずです。 iframeに効くイベントを指定する必要があるかと。
orange0190

2015/07/08 08:14

iframeに効くイベントを設定する必要はありません。 おそらくですが、hoverを記述しているスクリプトより前にスクリプトエラーが発生しています。 IEでF12を押すと、コンソール等を確認できます。 そちらで、スクリプトエラーが出てないかどうかを確認してください。
rrryo719719

2015/07/10 15:40

ご教示いただいたJQを記述しているとスクリプトエラーがでます。 JQ削除するとエラーはでませんが、iframeの3つ(FB、インスタ、youtube)がF12で確認するとコンソール×となります。 しかし、スクリプトエラーはJQ記述している他のサイトでもよく出ます。 スクリプトエラーとIEのhover内iframeがクリックできないのとは、関係ないように思うのですが。
orange0190

2015/07/10 15:42

jQuery記述時のエラーの内容を教えてください。
guest

0

ベストアンサー

ごめんなさい、解決策の回答ではないです。

IE では iframe タグに対して hover が効かないそうです。

ゆらゆらする原因は、マウスカーソルが footer の要素範囲内では hover が効いて上に移動するものの、iframe の要素範囲内に入ると hover が効かなくなるので下に移動し、また footer 要素範囲に戻るので上に移動、また iframe の要素範囲に入って下に移動 ・・・ を繰り返しているためです。

例えば、footer の左右の余白部分(iframe要素が無いところ)にマウスカーソルが乗っていれば、他種ブラウザと同様にスムーズに footer が出現すると思います。

jquery でなんとかする方法を見つけましたが、これがうまくいくかは試していません。
一応ご参考までに。
http://umai-bow.hateblo.jp/entry/2014/09/19/232717

投稿2015/06/26 03:37

takito

総合スコア3111

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問