IEの対応について困っています

Question

###前提・実現したいこと
すみません。教えていただけませんでしょうか。
IEで発生するバグ？をいくつか取り除きたいです。（version11）
簡単なJavascriptのコードですが、クロスブラウザでちゃんと動くようにしたいです。

###発生している問題・エラーメッセージ

特に今問題になっているのがメインビジュアルで、
ビジュアルの上にマウスを乗せるとヘッダーが出現⇒外すと消えるというものになります。
真ん中くらいにマウスがあるときは良いのですが、
ヘッダーとビジュアルの境界にマウスが来るとガクガクと出たり・消えたりと
おかしくなってしてしまいます。

また、少し下にスクロールさせたところでビジュアル上にマウスを持ってくると
ガクガクガクと少し上下にぶれたりします。
これはクロームでも出ます。

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

【HTML】
<header>
<div id="header">
<div class="inn">
<div class="symbol"><a href="index.htm"><img src="images/logo.png" alt="" /></a></div>

<!-- gnav start -->
<nav>
<ul id="gnavi">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</nav>
<!-- gnavi end -->

</div><!-- /.inn -->
</div><!-- /#header -->
</header>

<!--== main contents ==-->
<main>
<article>
<div id="m_visual">
<div class="hero"><a herf="#"><!-- 画像 --></a></div>
</div><!-- /#m_visual -->

・・・

【CSS】

/* ========================================== */
/* header
/* ========================================== */
#header .inn {
  position: relative;
  width: 100%;
  height: 70px;
  margin-top: -70px;
  border-bottom: 1px solid #ccc;
  background: #fff;
  color: #6d6e71;
  z-index: 1;
  animation: hide .4s linear 0s;
}

/* --- symbol --- */
#header .symbol {
  width: 160px;
  float: left;
  padding: 10px;
}
#header .symbol img {
  width: 100%;
}

/* --- nav --- */
#gnavi {
  float: left;
}
#gnavi li {
  float: left;
  padding: 32px 24px 0;
  font-weight: 900;
}

/* ========================================== */
/* visual
/* ========================================== */
#m_visual {
  position: relative;
  overflow: hidden;
}
/* --- hero --- */
#hero {
  width: 100%;
  height: 640px;
}

/* img　*/
#hero .hero-01 {
  width: 100%;
  height: 640px;
  background: url(../images/img-hero.jpg) no-repeat;
  background-position: center center;
  background-size: cover;
}
#hero .hero-01 h2 {
  position: absolute;
  width: 60%;
  top: 30%;
}
#hero .hero-01 h2 img {
  width: 100%;
}

#header .inn.hover {
  margin-top: 0;
  -webkit-animation: show .4s linear 0s;
          animation: show .4s linear 0s;
}
@-webkit-keyframes show {
    from { margin-top: -70px; }
    to   { margin-top: 0px;   }
}
@keyframes show {
    from { margin-top: -70px; }
    to   { margin-top: 0px;   }
}
@-webkit-keyframes hide {
    from { margin-top: 0px;   }
    to	 { margin-top: -70px; }
}
@keyframes hide {
    from { margin-top: 0px;   }
    to	 { margin-top: -70px; }
}


【JavaScript】
/* ----------------------------------------------------------------------

method

---------------------------------------------------------------------- */

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

###課題について
こうしたIEの問題が2～3ありまして、まとめますと、
1.上記の対応方法について皆さまは普段からどのようにご対応されていらっしゃるのでしょうか？
2.スクリプトが入っているとActiveコントロール？とかの表示が出ますが、
コードで回避できたりするものなのでしょうか？
3.同じくセキュリティで保護されているコンテンツのみ・・・と出た場合の
対処法などはあるのでしょうか？
4.また、hoverではなくmouceoverとかの方が良いのでしょうか？

他にも良くある注意点等がございましたら教えていただけましたら
とてもありがたいです。

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

Answer 1

詳しくは検証していないのでなんとも言えませんが
javascriptの部分だけみてみるとhoverの際に「hover」クラスを
つけたりとったりしているだけですよね？
それなら単にスタイルシートで「:hover」で処理すればいいだけのような気がします。
（それで状況が改善されるかどうかは別として）

Comments

[lingwood]

yambejp 様
お世話になります。ご回答のお礼が遅くなり大変失礼いたしました。
うまく状況がご説明できずすみません。

<header>要素の中にメインビジュアルを入れなおして
:hover処理を行ってみたいと今、試行しています。
JSを使うと簡単でしたが結構複雑なため
少し時間がかかっています。
サンプルコードを作りましたので、
一旦質問を締め、新しく作成しようと考えております。

取り急ぎの御礼と改めて解決に向けご教授いただけますと
ありがたく思います。

引き続きよろしくお願い致します。