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

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

ただいまの
回答率

90.48%

  • jQuery

    6953questions

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

jqueryで.hoverイベントが条件外でも動いてしまう

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 448

shiro-kuma

score 9

レスポンシブのWEBサイトを制作しています。

jqueryで、一定のブラウザサイズの時のみ、hoverイベントを付加したいのですが、一度リサイズすると、条件外でもイベントが発生してしまいます。
条件外のときに発生しないようにするためには、どうずれば良いのかご教示いただけないでしょうか。

よろしくお願いいたします。

 コード

$(window).on('load resize', function(){
  w = $(window).width();
  h = $(window).height();
  header = $("header");
  nav1 = header.find("#nav1");

  if( w > 679 ){
    nav1.find("li.nav1-1 a").hover(
      function(){
        $(this).stop().animate({"width" : 150});
        $(this).find(".pnm").fadeIn(100);
      },
      function(){
        $(this).stop().animate({"width" : 30});
        $(this).find(".pnm").fadeOut(100);
      }
    );
  }
}
<header>
  <nav id="nav1">
    <ul>

      <li class="nav1-1"><a href="tel:000-000-0000">
        <span>
           <b class="pnm">000-000-0000</b>
        </span>
      </a></li>

      ・
      ・
      ・

  </nav>
</header>
header #nav1 {
  overflow: hidden;
  margin: 5px 0 20px 0;
  float: right;
}

header #nav1 li {
  display: block;
  float: left;
  margin-left: 5px;
  text-align: center;
}

header #nav1 li a {
  width: 150px;
  height: 30px;
  background: #fff;
  border: 1px solid #113a5c;
  box-sizing: border-box;
  color: #113a5c;
  font-weight: bold;
  font-size: 0.85rem;
  line-height: 1;
  display: block;
}

header #nav1 li a:hover, header #nav1 li a:focus {background: #113a5c; color: #fff; font-weight: normal;}
header #nav1 li a:hover svg, header #nav1 li a:focus svg {fill:#fff;}

header #nav1 li span {
  width: 150px;
  height: 28px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  text-indent: -0.5rem;

}

header #nav1 li svg {
  fill: #113a5c;
  vertical-align: middle;
  margin-top: -3px;
}


header #nav1 li.nav1-1 a {
  width: 30px;
  background: #009fa8;
  border: none;
}

header #nav1 li.nav1-1 a span {
  text-indent: 0;
  color: #fff;
  white-space: nowrap;
}

header #nav1 li.nav1-1 svg {
  width: 11px;
  fill: #fff;
  margin-top: 0;
}

header #nav1 li.nav1-2 svg {
  width: 14px;
}

header #nav1 li.nav1-3 svg {
  width: 16px;
  padding-right: 1px;
}

header #nav1 li.nav1-4 svg {
  width: 14px;
  padding-right: 3px;
}

header #nav1 li.nav1-5 a {
  background: #113a5c;
  color: #fff;
  font-weight: normal;
}

header #nav1 li.nav1-5 svg {
  width: 16px;
  padding-right: 3px;
  fill: #fff;
}

header #nav1 li.nav1-5 a:hover, header #nav1 li.nav1-5 a:focus {background: #009fa8; border: 1px solid #009fa8;}

@media screen and (max-width:679px){
  #nav1, #nav2 {
    width: 100%;
    float: none !important;
  }
  #nav1 {
    margin-bottom: 5px !important;
  }

  #nav1 li {
    width: 49%;
    margin-bottom: 5px;
  }

  .nav1-2 , .nav1-4 {
    margin-left: 0 !important;
  }

  .nav1-3, .nav1-5 {
    margin-left: 2% !important;
  }

  header #nav1 li a {
    width: 100% !important;
  }

  header #nav1 li a span {
    width: 100% !important;
    height: auto;
    padding-top: 9px;
    display: block;
    text-indent: -0.5em !important;
  }

  #nav1 .nav1-1 {
    width: 100%;
    margin: 0 0 15px 0 !important;
    float: none;
    clear: both;
  }

  #nav1 .nav1-1 a {
    width: 100% !important;
    height: 40px;
    font-size: 1.2rem;
  }

  #nav1 .nav1-1 a span {
    width: 100%;
    height: auto;
    padding-top: 9px;
    text-indent: -0.5em !important;
    display: block;
  }

  header #nav1 li.nav1-1 svg {
    width: 18px;
    margin-top: -3px !important;
  }

  .pnm {
    display: inline;
  }

  header #nav2 ul li {
    text-align: center;
    margin-bottom: 5px;
    width: 49%;
  }

  header #nav2 ul li:nth-child(2n) {
    padding-left: 2% !important;
  }

  header #nav2 ul li a {
    border: 1px solid #4a4a4a;
    color: #1a1a1a;
    background: #ccecee;
    padding: 10px 0;
    box-sizing: border-box;
    font-weight: bold;
    font-size: 0.9rem;
  }

  header #nav2 a:hover, header #nav2 a:focus {
    color: #009fa8;
    border: 1px solid;
  }

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

イベントは一度関連付けられると、意図的に関連付けを切らないかぎりそのまま残ります。
つまり、一定のブラウザサイズになり、イベントが関連付けられると、その後ブラウザサイズに変化があっても、
イベントの関連付けはそのままです。

.off()というメソッドがありますので、条件外の時にはイベントの関連付けを外すように設定してみてください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/03/23 19:17 編集

    ご回答ありがとうございます!
    先ほどやってみたところ、イベントを外すことができました。
    初歩的なところだと思いますが、イベントの関連付けのことがわからなかったため、
    勉強になりました。
    ここでしばらくつまずいていたのでとても助かりました!!

    キャンセル

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

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • jQuery

    6953questions

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