###前提・実現したいこと
メインビジュアル（width:100% height:640px）の画像領域にマウスオーバーすると、
メインビジュアルが100pxほど下がってヘッダーが現れるように
したいのですが、IEの挙動で非常に困っております。

こちらが制作したいもののサンプルになります。

https://jsfiddle.net/a1hdczkq/17/

クロームやFirefox、上記サンプルだとうまく動くのですが、
IEだけうまくいきません。

###発生している問題

問題ですが、IEだけヘッダーのボトム（下辺）あたりにマウスが来ると
そこだけ1pxくらいの隙間？があるのでしょうか？
マウスオーバーが解除されてしまい、
ヘッダーが出たり入ったりと変な挙動になります。
メインビジュアルからヘッダーに移る際もヘッダーはその場で
ピタッとしていて欲しいのですが、
これを回避できる方法を模索しています。

###該当のソースコード

【HTML】
<header>
<div id="header" class="clearfix">
<div class="symbol">header</div>
</div><!-- /#header -->
</header><!--== header end ==-->

<!--== main contents start ==-->
<main>

<div id="m_visual" class="clearfix">
<!-- hero -->
  <div class="hero"></div>
</div><!-- /#m_visual -->

</main>

【CSS】
#header .symbol {
  padding: 40px 0;
  background: brown;
  color: #fff;
  text-align: center;
}
#header {
  margin-top: -110px;
  -webkit-animation: hide .4s linear 0s;
          animation: hide .4s linear 0s;
}
#header.hover {
  margin-top: 0;
  -webkit-animation: show .4s linear 0s;
          animation: show .4s linear 0s;
}
@-webkit-keyframes show {
    from { margin-top: -110px; }
    to   { margin-top: 0px;   }
}
@keyframes show {
    from { margin-top: -110px; }
    to   { margin-top: 0px;   }
}
@-webkit-keyframes hide {
    from { margin-top: 0px;   }
    to	 { margin-top: -110px; }
}
@keyframes hide {
    from { margin-top: 0px;   }
    to	 { margin-top: -110px; }
}

#m_visual {
  height: 300px;
  background: blue;
}

【JS】

$(function() {
  $('#m_visual,#header').hover(
    function(e) {
      $('#header').addClass('hover');
    },
    function(e) {
      $('#header').removeClass('hover');
    }
  );
});

###試したこと
実際にはグローバルナビが入ったりするため、inner等でラップしていたりします。
その領域を広げたり、メインビジュアルにマイナスマージンしたりしてみましたが、
よくよく考えますとJSで指定しているheader領域が違う？のだと思い、
解決に至っておりません。

非常に切迫しておりまして、
何卒ご助言いただけませんでしょうか？

よろしくお願い申し上げます。

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

回答1件

ベストアンサー

見た感じchromeもfirefox57もIE11もほぼおなじような挙動に見えます
マウスがheaderとmainにまたがる場合は処理を継続したいのでしょうか？
headerとmainをwrapして、そのhoverにheaderのslideUp,Downで処理するとかどうでしょう？

sample

ちょっと雑ですが以下

javascript
1$(function() {
2  $('#header').hide();
3   $('#wrap').hover(
4    function(e) {
5      $('#header').slideDown();
6    },
7    function(e) {
8      $('#header').slideUp();
9    }
10  );
11});
12

CSS
1#header{
2  height: 100px;
3  background: brown;
4  color: #fff;
5  text-align: center;
6}
7#m_visual {
8  height: 300px;
9  color: #fff;
10  text-align: center;
11  background: blue;
12

HTML
1<div id="wrap">
2<header>
3<div id="header" class="clearfix">
4<div class="symbol">header</div>
5</div><!-- /#header -->
6</header><!--== header end ==-->
7
8<!--== main contents start ==-->
9<main>
10
11<div id="m_visual" class="clearfix">
12<!-- hero -->
13  <div class="hero"></div>
14</div><!-- /#m_visual -->
15
16</main>
17</div>

投稿2017/11/30 10:24

編集2017/11/30 11:11

yambejp

総合スコア114812

lingwood

2017/11/30 11:04 編集

yambejp　様お世話になります。先ほどに引き続きありがとうございます。おっしゃられる通りです。 ”またがる”部分でIEだけがヘッダーが引っ込んでしまい結果、ガクガクガクと画面がぶれてしまうような挙動になります。今、CSSでスライドUP、DOWNできるよう改変にトライしています。ただ、今後のこともありますので、Javascriptで回避する方法がございましたら勉強しておきたいと思っております。取り急ぎご指南いただいた方法を進めてまいります。