gpt4 book ai didi

html - 将鼠标悬停在元素上时光标不会改变

转载 作者:太空宇宙 更新时间:2023-11-04 02:24:08 26 4
gpt4 key购买 nike

我有一个“menu_toggle”div,当我将鼠标悬停在它上面时应该会改变鼠标光标。通常这是相对简单的,但是当我添加 cursor:pointer;对于我的 CSS,它不起作用。我尝试更改其 Z-index 以使其位于顶部,但这并没有解决问题。

我将在下面包含代码片段。欢迎提出任何建议。谢谢!

#navbar {
position:absolute;
width: 100%;
height: 75px;
background-color: rgba(0,0,0,0.6);
z-index: 10;
}
#navbar_content {
display: flex;
align-items: centre;
height: 100%;
width: 95%;
}
#logo {
align-self: center;
margin: auto;
width: 64px;
height: 64px;
}
#logo img {
max-height: 64px;
}
#menu_toggle {
align-self: center;
display: block;
width: 64px;
height: 64px;
margin-left: 2%;
z-index: -1;
}
#slideoutmenu {
display: none;
position: fixed;
text-align: left;
left: 0;
margin-top: 5px;
width: 250px;
height: 500px;
background: rgba(0,0,0,0.6);
color: white;
font-family: "Liberation Sans", sans-serif;
}
<html>
<head>
<meta charset="utf-8"/>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="navbar">
<div id="navbar_content">
<div id="menu_toggle"><img style="max-height: 64px;" src="images/menu_icon.png"/></div>
<div id="slideoutmenu">
<br>
<br>
<br>
<br>
<br>
<ul>
<li>Design</li>
<li>Development</li>
<li>See My Work</li>
<li>About Me</li>
</ul>
</div>
<div id="logo">
<img src="images/logo.png"/>
</div>
</div>
</div>
</body>
</html>

最佳答案

z-index 仅在与位置 absoluterelativefixed 一起使用时起作用。

#menu_toggle {
position: relative;
cursor: pointer;
z-index: 10;
}

关于html - 将鼠标悬停在元素上时光标不会改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37617245/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com