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

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

ただいまの
回答率

91.37%

  • JavaScript

    11187questions

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

  • jQuery

    4882questions

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

  • Chrome

    396questions

    Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

  • Internet Explorer

    213questions

    Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

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

解決済

回答 1

投稿 2017/11/29 20:20 ・編集 2017/11/29 20:52

  • 評価
  • クリップ 0
  • VIEW 345

lingwood

score 17

前提・実現したいこと

すみません。教えていただけませんでしょうか。
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とかの方が良いのでしょうか?

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

投稿 2017/11/30 11:24

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/30 18:31

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

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

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

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

    キャンセル

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

ただいまの回答率

91.37%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    11187questions

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

  • jQuery

    4882questions

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

  • Chrome

    396questions

    Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

  • Internet Explorer

    213questions

    Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。