如何在悬停时显示隐藏的侧边栏

Question

所以，我有一个隐藏的边栏，如果我单击一个按钮将其打开，它就会显示出来。

这是在 html:

    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">News</a>
      <a href="#">Contact</a>
   </div>

这是在 css:

/* The side navigation menu */
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    padding-top: 60px;
    transition: 0.5s;
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 20px;
}

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

这是javascript代码：

<script type="text/javascript">
        /* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */
        function openNav() {
            document.getElementById("mySidenav").style.width = "250px";
            document.getElementById("contoh").style.marginLeft = "250px";
            document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
        }

        /* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
        function closeNav() {
            document.getElementById("mySidenav").style.width = "0";
            document.getElementById("contoh").style.marginLeft = "0";
            document.body.style.backgroundColor = "white";
        }
    </script>

我的问题是，如何将“打开”按钮更改为悬停状态并显示完整的侧边栏。就像这个网站的侧边栏一样：https://la24.org/games-concept 非常感谢。

Answer 1

可以试试jQuery的mouseover方法和mouseout方法解决这个问题

例如：

$("#mySidenav").mouseover(function(){ //Your code here. })

和

$("#mySidenav").mouseout(function(){ //Your code here. })

Answer 2

@OP，是的，您必须在导航栏上增加一些宽度。就像您提供的 link 中的导航栏一样。无需使用 JavaScript 打开它。你可以用简单的 CSS:

.sidenav {
   height: 100%;
   width: 50px; /* Put some width to hover on. */
}

/* ON HOVER */
.sidenav:hover{
   width: 250px;
}

/* The side navigation menu */
.sidenav {
    height: 100%;
    width: 50px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    padding-top: 60px;
    transition: 0.5s;
}

/* ON HOVER */
.sidenav:hover{
   width: 250px;
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 20px;
}

<div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">News</a>
      <a href="#">Contact</a>
</div>

Answer 3

You can implement using CSS also without writing javascript code. See below the code. 

<div class="parent">
        <button class="dropbtn">Dropdown</button>
        <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">News</a>
        <a href="#">Contact</a>
        </div>
   </div>


.parent {
    position: relative;
    display: inline-block;
}

.parent:hover  .sidenav {
    display:block;
}


In the code mentioned by Dang Khoa, you have to include the button in side navigation or implement the onMouseHover on your button id.

如何在悬停时显示隐藏的侧边栏

How to make hidden sidebar display on hover

html

javascript

css

sidebar

hover