user6419974 user6419974 - 6 months ago 8
CSS Question

Cursor won't change when mousing over element

I have a "menu_toggle" div that should change the mouse cursor when I mouse over it. Usually this is relatively simple however when I add cursor:pointer; to my CSS it does not work. I have tried changing its Z-index so that it is on top but this has not fixed the issue.

I will include code snippets below. Any suggestions are welcome. Thanks!



#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>




Answer

z-index work only when applied with position absolute, relative or fixed.

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