支持 IE 中伪元素上的光标

Question

我想知道 IE 是否支持以下格式？

更少的代码：

.a:not(.b) {
  .c:hover:before {
    cursor:nwse-resize;
  }
}

同样适用于 chrome 和 firefox

.c:before {
  content: "Hover me"
}

.a:not(.b) .c:hover:before {
  cursor: nwse-resize;
}

<div class="a">
  <p class="c">
    Some text
  </p>
</div>
<div class="a b">
  <p class="c">
    Some text
  </p>
</div>

期望浏览器在满足条件时显示 'nwse' 光标。

适用于 chrome 和 firefox，但不适用于 IE。

Answer 1

为什么您的特定代码不起作用与 :not 或 :hover 或 :before 无关。关于 cursor 在 IE 中 pseudo-elements。

您可以将其他样式应用于 before 但不能应用于 IE 不支持的游标（伪元素上的游标）。

为了达到你想要的结果（光标在前面）你可以做这样的事情。见下文

.c:before {
  content: "Hover me";
  pointer-events: auto;   
}
.a:not(.b) .c {
  pointer-events: none;
  cursor: nwse-resize;
}

<div class="a">
  <p class="c">
    Some text
  </p>
</div>
<div class="a b">
  <p class="c">
    Some text
  </p>
</div>

光标样式（与其他样式一样）由子项（在本例中为 :before）从父项（在本例中为 .a:not(.b) .c）继承。所以添加指向父级的指针，但也添加 pointer-events: none; 删除任何操作，如 :hover 或 :focus 等。然后在子级上将 pointer-events 覆盖为 auto.

这不是一个完美的解决方案，因为它禁用了父级上的其他交互，但在这种特定情况下，它完成了工作。

支持 IE 中伪元素上的光标

Support for cursor on pseudo elements in IE

css

less