CODEWITHSUNDEEP
htmlcss
Alpha Bravo Charlie ...
Alpha Bravo Charlie ...

Reputation: 820

Disable the div plus change the cursor

I have div element which I need to disable. So I have defined the following CSS class for it:

.hideDiv {
    pointer-events: none;
    cursor: not-allowed;
}

While the first line of the CSS class works fine, the second line does not. Can you help me with this?

Please note that I need to get this work on Internet Explorer.

Upvotes: 1

Views: 2198

Answers (1)

Nick Parsons
Nick Parsons

Reputation: 50759

pointer-events: none will effectively stop mouse interactions with .hideDiv. This means that the action of hovering over the div will also be prevented, thus making the cursor not appear.

Instead, you can wrap your .hideDiv in another div, and add the cursor property to the outer/parent div.

See example below:

.box {
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

.parent {
  cursor: not-allowed;
}

.hideDiv {
  pointer-events: none;
}

/* Remove pointer-events: none and the below css works */
.hideDiv:hover {
  background-color: lime;
}
<div class="parent box">
  <div class="box hideDiv">
  </div>
</div>

Upvotes: 3

Related Questions