我有一个“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 仅在与位置 absolute、relative 或 fixed 一起使用时起作用。
#menu_toggle {
position: relative;
cursor: pointer;
z-index: 10;
}
关于html - 将鼠标悬停在元素上时光标不会改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37617245/