[JAVA] [JQUery] Anzeige des jQuery-Dropdown-Menüs beim Bewegen der Maus

【Tor】

Erstellen Sie eine Schaltfläche, die angezeigt wird, wenn Sie mit der Maus darüber fahren (siehe Abbildung unten)

【verdienen】

■ Verbesserung von UX ■ Verbessertes Verständnis von jQUery

【Entwicklungsumgebung】

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

【Implementierung】

html

• Geben Sie "id =" open_menu ""
• Füge "id =" menu "" hinzu und verstecke dich mit "style =" display: none; ""

html:hoge.html.erb

<div id="open_menu">
  <h2>logolog</h2><br>
  <div id="menu" style="display: none;">
    <%= link_to "Was ist Logolog", homes_about_path, class:'btn btn-primary' %>
    <%= link_to "Mitgliedsregistrierung", new_user_session_path, class:'btn btn-primary' %>
    <%= link_to "Kontaktiere uns", homes_inquiry_path, class:'btn btn-primary' %>
  </div>
</div>

js

• Zünden, wenn (#open_menu) schwebt
• "Fade Toggle" ist eine Methode, die ausgeblendet und angezeigt wird

hoge.js

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

das ist alles

[Ich möchte es zusammen lesen]

■ [jQuery] Ein Typ, den selbst Anfänger gut verstehen können https://qiita.com/tanaka-yu3/items/a03734b248c3f2ee8461

■ [jQuery] Bildlauf Ich habe den Bildlauf gesehen, der beim Bildlauf angezeigt wird. https://qiita.com/tanaka-yu3/items/9a66c4c0e058291694dd

■ [jpostal] jQuery-Schienen für die automatische Adresseneingabe Wahrscheinlich der einfachste Weg https://qiita.com/tanaka-yu3/items/e5403e717e3ee3c3f64e