[JAVA] [JQUery] Affichage du menu déroulant jQuery lorsque la souris survole

【objectif】

Créez un bouton qui apparaît lorsque la souris survole, comme indiqué ci-dessous

画面収録 2020-07-17 10.09.25.mov.gif

【mérite】

■ Amélioration de l'UX ■ Meilleure compréhension de jQUery

【Environnement de développement】

■ Mac OS catalina ■ Ruby on Rails (5.2.4.2) ■ Virtual Box:6.1 ■ Vagrant: 2.2.7

【La mise en oeuvre】

html

Donnez "id =" open_menu ""
Ajouter "id =" menu "" et masquer avec "style =" display: none; ""

`html:hoge.html.erb`


<div id="open_menu">
  <h2>logolog</h2><br>
  <div id="menu" style="display: none;">
    <%= link_to "Qu'est-ce que logolog", homes_about_path, class:'btn btn-primary' %>
    <%= link_to "Inscription des membres", new_user_session_path, class:'btn btn-primary' %>
    <%= link_to "Nous contacter", homes_inquiry_path, class:'btn btn-primary' %>
  </div>
</div>

S'enflammer lorsque (#open_menu) survole
"Fade Toggle" est une méthode qui cache et apparaît

`hoge.js`


$(function () {
  $('#open_menu').hover(function () {
    $('#menu').fadeToggle();
  });
});

c'est tout

[Je veux le lire ensemble]

■ [jQuery] Un gars que même les débutants pourraient bien comprendre https://qiita.com/tanaka-yu3/items/a03734b248c3f2ee8461

■ [jQuery] scroll J'ai commencé à voir celui qui apparaît lorsque je fais défiler. https://qiita.com/tanaka-yu3/items/9a66c4c0e058291694dd

■ [jpostal] jQuery Rails d'entrée d'adresse automatique Probablement le moyen le plus simple https://qiita.com/tanaka-yu3/items/e5403e717e3ee3c3f64e