javascript - onmouseover 事件显示和隐藏侧边菜单的滚动条

Question

我希望我的 HTML 页面在鼠标悬停事件上显示侧边菜单滚动条。我可以在 CSS 中使用以下代码隐藏此边栏。

.side-ul {
    height: 550px;
    cursor: pointer;
    overflow: hidden;
}

但我无法在鼠标悬停事件上显示它。我尝试使用

<div onmouseover="mouseMoveFunction()">
    overflow=auto;
</div>
function mouseOver(){
    return $("side-ul-over").start();
}
.side-ul-over{
    cursor: pointer;
    overflow:auto;
} <!-- This is CSS part -->

我对 HTML 和 CSS 很陌生。任何帮助将不胜感激。

nav.sidebar {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    background: none repeat scroll 0 0 #0099ff;
    color: white;
    padding: 20px 10px;

}

Answer 1

您可以使用 CSS 按照以下方式完成:

.side-ul:hover {
    overflow: auto;
}

使用 JQuery 检查:

$(".side-ul").mouseover(function(){$(this).css("overflow","auto");});
$(".side-ul").mouseout(function(){$(this).css("overflow","hidden");});

.side-ul {
    height: 260px;
    width:200px;
    cursor: pointer;
    overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="side-ul" onmouseover="mouseOver()">
    overflow=auto;<br/>
    overflow=auto;<br/>v
    overflow=auto;<br/>voverflow=auto;<br/>overflow=auto;<br/>
    overflow=auto;<br/>overflow=auto;<br/>overflow=auto;<br/>overflow=auto;<br/>
    overflow=auto;<br/>overflow=auto;<br/>overflow=auto;<br/>overflow=auto;<br/>overflow=auto;<br/>overflow=auto;<br/>overflow=auto;<br/>overflow=auto;<br/>overflow=auto;<br/>overflow=auto;<br/>overflow=auto;<br/>
</div>

希望对您有所帮助。