1

The cursor will not change when mousing on the element

 2 years ago
source link: https://www.codesd.com/item/the-cursor-will-not-change-when-mousing-on-the-element.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

The cursor will not change when mousing on the element

advertisements

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>

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

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

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK