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

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

ただいまの
回答率

90.75%

  • jQuery

    6310questions

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

jsで下線が追尾するメニューで下線を元の場所に戻すには?

解決済

回答 3

投稿 編集

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

bohemiantt

score 3

 前提・実現したいこと

jsで下線がスライドして追尾するメニューを作りました
追加機能としてマウスのホバーが外れた時にカレントのある場所に下線を戻すようにしたいのですが
どうすればよいでしょうか

 参考ページ

https://digipress.digi-state.com/tech/menu-with-underline-sliding-animation/

 内容

<div id="g_menu">
 <ul>
  <li class="current"><a href="#" title="ホーム"><img src="img/g_menu01.png" width="45" height="20" alt="ホーム"></a></li>
  <li><a href="#"><img src="img/g_menu02.png" width="67" height="20" alt="下層ページ1"></a></li>
  <li><a href="#"><img src="img/g_menu03.png" width="67" height="20" alt="下層ページ2"></a></li>
  <li><a href="#"><img src="img/g_menu04.png" width="67" height="20" alt="下層ページ3"></a></li>
  <li><a href="#"><img src="img/g_menu05.png" width="67" height="20" alt="下層ページ4"></a></li>
 </ul>
</div>
 #g_menu {
    width:649px;
    height:20px;
    padding:0;
    margin:85px 0 0;
    float: right;
    position:relative;
}
#g_menu ul {
    overflow: hidden;
}
#g_menu ul li {
    float: left;
    list-style:none;
}
#g_menu span{
    background-color:#ED7100;
    width:50px;
    height:2px;
    display:block;
    position: absolute;
    left:0px;
    top:-15px;
   -webkit-transform: translate3d(0,0,0);
}
jQuery(function( $ ) {
    // 初期位置へ移動
    $('#g_menu span').css({ 
        width: $('#g_menu .current').outerWidth(),
        left: $('#g_menu .current').position().left 
    });
    // マウスオーバーでアニメーション
    $('#g_menu a').mouseover(function(){
        $('#g_menu span').stop().animate({
            width: $(this).outerWidth(),
            left: $(this).position().left}
        ,'fast');
    });
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

+2

「ホバーが外れた時にカレントのある場所にメニューに戻る」が
ちょっと難解な表現で何をどうしたいのかよくわかりません

ホバーの処理をjavascriptで実装するなら
mouseoverに対してmouseoutが必要になるのでは?
もしくはhoverで処理を列記するかです。

 sample

$(function(){
  $('#hoge').hover(
    function(){
      $(this).css("color","red");
    },
    function(){
      $(this).css("color","");
    },
    );
  $('#fuga').on({
    "mouseover":function(){
      $(this).css("color","blue");
    },
    "mouseout":function(){
      $(this).css("color","");
    },
  });
});
<div id="hoge">#hoge</div>
<div id="fuga">#fuga</div>

 追記

ちょっと考え直しました。こんな感じですか?

$(function(){
  $('.current').css("background-Color","red");
  $('#g_menu li').on('mouseover',function(){
    $(this).css("background-Color","red").siblings().css("background-Color","");
  });
  $('#g_menu ul').on('mouseout',function(){
    $(this).find('.current').css("background-Color","red").siblings().css("background-Color","");
  });
});
<div id="g_menu">
<ul>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/04/17 20:13 編集

    すいません日本語がちょっとおかしいですね、、
    「ホバーが外れた時にカレントのある場所に下線を戻す」ということなんですが、

    具体的には下記ページの「ホバーが外れた時」の内容です
    https://digipress.digi-state.com/tech/menu-with-underline-sliding-animation/

    おっしゃるようにmouseoutの指示を加えたらできそうなんですが、、

    キャンセル

  • 2018/04/17 20:43

    調整してみました

    キャンセル

check解決した方法

+1

yambejpさんの回答を参考に思った動き変更できました

jQuery(function( $ ) {
    // 初期位置へ移動
    $('#g_menu span').css({ 
        width: $('#g_menu .current').outerWidth(),
        left: $('#g_menu .current').position().left 
    });
    // マウスオーバーでアニメーション
    $('#g_menu a').mouseover(function(){
        $('#g_menu span').stop().animate({
            width: $(this).outerWidth(),
            left: $(this).position().left},'fast');
    // マウスアウト
    }).mouseout(function(){
        $('#g_menu span').stop().animate({
        width: $('#g_menu .current').outerWidth(),
        left: $('#g_menu .current').position().left},'fast');
    });
});

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

直接的な答えじゃないけれど, 試しに作ってみた.
yambejpさんがおっしゃっているとおり, カーソルが外れた際の処理を記述する必要があります.

<ul id="list">
    <li data-row="1">あいうえお</li>
    <li data-row="2">かきくけこ</li>
    <li data-row="3">さしすせそ</li>
    <li data-row="4">たちつてと</li>
    <li data-row="5">なにぬねの</li>
</ul>
ul{
    --height: 1.5em;
    --row: 1;/*初期位置*/
    background-image: linear-gradient(black, black);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    transition: background-position-y 0.5s ease;
    background-position-y: calc(var(--height)*var(--row) - 1px);
}
li{
    height: var(--height);
}
li:hover{
    color: red;
}
"use strict";
{
    list.onmouseover = e => 
        e.target.dataset.row && list.style.setProperty("--row", e.target.dataset.row);
    list.onmouseleave = e => 
        list.style.removeProperty("--row");
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

  • 解決済

    navのタブメニューの要素が、ずっと表示されてしまいます。

    navのtab-changeクラスにおいて、#howtoseeを、タブがクリックした時だけ表示するようにしたいのですが、他の2つの#this-weekと#todayをクリックした時

  • 解決済

    ページ上部にスクロール設定について

    ページの右下に、クリックするとページ上部に行く設定をしたのですが、スクロール位置を1000以下にすると非表示に設定をhead内に記述したのですが実行できません。 ご教授頂けますと嬉

  • 解決済

    box内のリストに画像をずらしながら配置したいです。

    初めて質問させていただきます。 現在某スクールにて演習課題を進めているのですが、boxタグ内の箇条書きリストに画像を位置をずらしながら配置していきたいのですが、うまくいかず苦戦

  • 受付中

    レスポンシブルデザインについて

    ページ上部のメニューをクリックしたらスマホのサイトのようなメニューバーを表示させたいのですがどうすればよろしいでしょうか。 ちなみにこちらのサイトを参考にしました https://

  • 解決済

    divで囲んだ部分が縦に並ばない

    前提・実現したいこと divのitemsクラスで囲んだ部分が縦に並ばない。 col-xs-8とcol-xs-4を使い画面を8:4に分けてその4の部分に画像を縦に並べたい。 発生

  • 解決済

    footerとdivで囲んだ間の要素に隙間を空けたい

    前提・実現したいこと footerと3番目の<div class="advertisement">で囲んだ間の要素に隙間を空けたいが、今ぴったりくっついている。 発生している問

  • 解決済

    画像の下にテーブルが来てしまう

    前提・実現したいこと 画像の下にテーブルが来てしまう。 画像とテーブルの間に30px隙間を空けて配置したい。 発生している問題・エラーメッセージ エラーは特に発生していない。

  • 解決済

    marginが大きすぎて画像が右に回らない

    marginが大きすぎて画像が右に回らないです。htmlに <html lang="en"> <body class="relative"> <div class="menu"

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

  • jQuery

    6310questions

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