因此,如果单击按钮打开它,我就会隐藏并显示补充工具栏。如何在悬停上隐藏边栏显示
这是HTML:
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</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很多感谢之前。
你想要哪个元素徘徊?按钮?或者导航栏的某个部分?你可以在按钮上使用'onmouseover'和'onmouseleave'。如果你想要悬停的是导航栏的某个部分(就像你提供的链接一样),根据你的标记。你不能。因为它显示那里你的导航栏没有宽度。意味着没有显示。那么如何将光标放在没有显示的元素上呢? – rmondesilva
我的意思是,我想让我喜欢我给的链接。所以,我必须先显示一些宽度,或者显示一些图标,当全宽时它会显示所有的菜单,我如何做到这一点? @rmondesilva – Rian
是的。我发布了一个答案来向你展示一个例子。 – rmondesilva