禁用Div并修改光标：IE下cursor:not-allowed不生效求助

Hey there! Let's break down why your cursor: not-allowed rule isn't taking effect and get this sorted, even for older IE browsers.

Common Reasons the Cursor Rule Fails #

First, let's check the basics:

• CSS Specificity Conflicts: Another CSS rule with higher specificity (like an inline style, or a selector targeting the element more directly) might be overriding your cursor value. Fire up your browser's dev tools (F12), inspect the div, and check the "Computed" tab to see if cursor is being crossed out or replaced by another value.
• pointer-events: none Interaction: When you set pointer-events: none, the element stops receiving all mouse events. Some browsers won't apply cursor styles to elements that don't interact with the mouse—this is likely the main issue here.

Solution 1: Separate Cursor and Pointer Events (Modern Browsers + IE11) #

Instead of applying both rules to the same div, split them between a parent container and the target div:

/* Parent container handles the cursor */
.hideDiv-wrapper {
  cursor: not-allowed;
}

/* Target div blocks interactions */
.hideDiv {
  pointer-events: none;
  /* Optional: Add opacity to visually indicate disabled state */
  opacity: 0.6;
}

Then update your HTML structure:

<div class="hideDiv-wrapper">
  <div class="hideDiv">Your content here</div>
</div>

This works because the parent container still receives mouse events, so the cursor: not-allowed shows up, while the inner div blocks any clicks or hover actions. IE11 supports both pointer-events: none and cursor: not-allowed, so this covers that version.

Solution 2: Full IE Compatibility (IE8/9/10) #

Older IE versions (pre-11) don't support pointer-events: none, so we need a different approach:

Step 1: CSS for Visual Cue + Overlay #

.hideDiv {
  cursor: not-allowed;
  position: relative;
  opacity: 0.6;
}

/* Overlay to block clicks (works in IE9+) */
.hideDiv::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1;
}

/* IE8-specific hack (since it doesn't support ::before) */
.ie8 .hideDiv .ie-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1;
}

Step 2: HTML Structure #

<div class="hideDiv">
  <!-- Only include this overlay div if supporting IE8 -->
  <div class="ie-overlay"></div>
  Your content here
</div>

Step 3: JavaScript to Block Events #

Add this script to prevent clicks in older IE:

var disabledDivs = document.querySelectorAll('.hideDiv');
for (var i = 0; i < disabledDivs.length; i++) {
  disabledDivs[i].onclick = function(e) {
    if (e && e.preventDefault) {
      e.preventDefault();
      e.stopPropagation();
    } else {
      window.event.returnValue = false;
      window.event.cancelBubble = true;
    }
    return false;
  };
}

Quick Checks to Verify #

• After applying the fix, hover over the div—you should see the "not-allowed" cursor.
• Try clicking the div—no actions should trigger.
• Test in IE (use IE dev tools' emulation mode to check older versions).

内容的提问来源于stack exchange，提问作者Alpha Bravo Charlie ...