jQueryでホバーしたときに出る登録画面がうまく表示されない

Question

今やっていること

1. progateのjQuery道場コースの模写とアレンジ

実現したいこと

新規登録ボタンにカーソルを合わせたときに登録画面が表示され,カーソルを外すと非表示になる```

コード

HTML

<!-- ボタン部分    -->
  <div class="btns">
    <a class="new btn" id="show-modal">新規登録はこちら</a>
    <h4>or</h4>
    <a class="face btn" href="https://ja-jp.facebook.com/">Facebookで登録</a>
    <a class="tw btn" href="https://twitter.com/progatejp?lang=ja">Twitterで登録</a>
  </div>
 <!-- ボタン部分  -->
 <!-- modal部分  -->
  <div class="signup-modal-wrapper" id="signup-modal">
    <div class="modal">
      <div id="close-modal">
        <i class="fa fa-2x fa-times" id="close-modal"></i>
      </div>
      <div id="signup-form">
        <h2>Emailで新規登録</h2>
        <form action="#">
          <input class="form-control" type="text" placeholder="メールアドレス">
          <input class="form-control" type="password" placeholder="パスワード">
          <div id="submit-btn">新規登録</div>
        </form>
      </div>
    </div>
  </div>
コード

jQuery

$(function() {
    // $("#show-modal").click(function(){
    //     $("#signup-modal").fadeIn();
    // });
    // $("#close-modal").click(function(){
    //     $("#signup-modal").fadeOut();
    // });


    $("#show-modal").hover (
        function() {
            $("#signup-modal").fadeIn();
        },
        function(){
            $("#signup-modal").fadeOut();
        }
    )

});
コード

このようなコードで新規登録ボタンにカーソルを合わせると登録画面は出るものの、すぐに消えてしまいます。

どのようにすれば持続的に登録画面が出続けるようになるでしょうか

Comments

[hatena19]

画像でなく、実際のコードをコピーして貼り付けてください。
その時はマークダウンのコードブロックで囲んでください。下記を参照してください。
https://teratail.com/help/question-tips#questionTips3-5

[taiyou.]

修正しました　これでどうでしょうか

[mari.rinn]

$("#signup-modal").fadeOut();
}
)

ここの　)　の後　セミコロン;が抜けてますが、実際のコードはどうですか？抜けてるなら入れてください。

Answer 1

いったんホバーしたら表示したままにしたいということでしょうか。
で、×をクリックしたら非表示にするということかな？

だとしたら、

$(function() {
   $("#close-modal").click(function(){  
       $("#signup-modal").fadeOut(); 
   });  
  $("#show-modal").hover (  
    function() {  
      $("#signup-modal").fadeIn();  
    }  
  )  
});  

CodePenサンプル

Comments

[taiyou.]

これです！うまくできてました！ありがとうございます