CODEWITHSUNDEEP
javascripthtmlcssfrontend
Klutch
Klutch

Reputation: 171

Prevent Cursor from changing on overlap

I am writing the CSS and HTML for a site currently under construction, something I am not too familiar with having to code.

I have, per request, created a navigation menu that sits on the left side of the screen and expands to cover the page content partially when clicked, allowing the user to show and hide the nav when not needed.

The content that the nav overlaps when it is opened is a bunch of tables, with clickable cells and resizable columns (i.e. they change the cursor to a pointer to allow the user to know they can do something with the cells/table columns)

But when the nav expands over the page content, I am still picking up the cursor changes behind it, making it seem clickable in wrong locations.

Can anyone point me in the right direction on how to prevent elements on the page from picking up cursor changes on elements behind it? I can probably dynamically change the CSS using javascript when the navBar is opened and closed (remove the cursor on open, add it back when closed) but I am searching for a simpler and more universal fix that can be utilized in the future as well.

Upvotes: 0

Views: 315

Answers (2)

bren
bren

Reputation: 4334

You can force cursors to be a certain way using the cursors CSS property (MDN). See below, where I force all elements that aren't links to have a regular cursor:

*:not(a) {
  cursor: default
}

Also, see @Nunchy's answer to correctly configure z-indexs so this type of thing won't happen

Upvotes: 0

Nunchy
Nunchy

Reputation: 948

Sounds like you need to set the z-index property for each of your elements.

If you create elements without assigning a z-index they'll be indexed automatically, any elements you create after you create the nav will have a higher z-index by default.

Make sure all of your elements have a z-index and that the nav has a higher z-index than the elements it will overlap, example:

.nav {
    z-index: 100;
}

.el1 {
   z-index: 99;
}

.el2 {
    z-index: 98;
}

Etc, think of it as layering your elements on top of one another, the if an element has a higher z-index than another it will be on top of it.

Upvotes: 1

Related Questions