因此,如果單擊按鈕打開它,我就會隱藏並顯示補充工具欄。如何在懸停上隱藏邊欄顯示
這是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