こんにちは。
表題の件、たいへん困っております。
コードをまるごとコピペしてご覧ください。
下部に横広い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&width=500&height=300&colorscheme=light&show_faces=true&header=false&stream=true&show_border=false&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コード
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/06/26 09:03
2015/06/26 09:56
2015/06/27 07:37
2015/06/27 08:02
2015/06/27 13:38 編集
2015/06/29 03:26
2015/06/29 10:53
2015/06/30 00:51
2015/06/30 05:11
2015/07/02 01:47
2015/07/03 08:47
2015/07/03 09:23
2015/07/03 13:31
2015/07/06 00:08
2015/07/06 08:30
2015/07/06 23:49
2015/07/08 06:35
2015/07/08 08:14
2015/07/10 15:40
2015/07/10 15:42