jquery - 在悬停侧导航实现css

我在我的项目中使用了materializecss Side Nav。我正在尝试显示悬停导航栏。有人可以帮我吗？
以下是我的代码段。

$("nav").hover(function() {
    $('.sidenav').sidenav();
});

<div class="navbar">
    <nav>
        <div class="nav-wrapper">
            <a href="#" data-target="slide-out" id="menu" class="sidenav-trigger"><i class="material-icons">menu</i></a>
            <!-- <a href="#" data-target="slide-out" id="menu_icon" class="sidenav-trigger"><i class="material-icons">menu</i> -->
        </div>
    </nav>
</div>
<ul id="slide-out" class="sidenav">
    <li>
        <div class="user-view">
            <p class="nav_title">TURBIZO</p>
        </div>
    </li>
    <li><a class="nav_list" href="index.html">Home</a></li>
    <li><a class="nav_list" href="about.html">About</a></li>
    <li><a class="nav_list highlight" href="contact.html" >Contact</a></li>
    <li><a class="nav_list" href="#!">Carrers</a></li>
</ul>

最佳答案

在Material CSS中，使用side-nav代替sidenav。 Material CSS Sidenav Reference

<ul id="slide-out" class="side-nav">

使用数据激活而不是数据目标。

<a href="#" data-activates="slide-out" id="menu" class="sidenav-trigger"><i
 class="material-icons">menu</i></a>

在jquery中，请使用.sidenav-trigger而不是.sidenav。插件名称也是sideNav（）

$(".sidenav-trigger").sideNav();

这是sidenav的代码片段。

<nav>
  <div class="nav-wrapper">
   <a href="#" data-activates="slide-out" id="menu" class="sidenav-trigger">
   <i class="material-icons">menu</i></a>
  </div>
</nav>
<ul id="slide-out" class="side-nav">
 <li>
  <div class="user-view">
  <p class="nav_title">TURBIZO</p>
  </div>
 </li>
 <li><a class="nav_list" href="index.html">Home</a></li>
 <li><a class="nav_list" href="about.html">About</a></li>
 <li><a class="nav_list highlight" href="contact.html" >Contact</a></li>
 <li><a class="nav_list" href="#!">Carrers</a></li>
</ul>

在materialize.js之前添加jquery.js。首先初始化sideNav插件，然后更改触发方法。

$(document).ready(function() {
 $(".sidenav-trigger").sideNav();
   $("nav").hover(function () {
     $(".sidenav-trigger").sideNav('show');
   });
});

On hover SideNav Material CSS

关于jquery - 在悬停侧导航实现css，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48861406/