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无关。大约是IE中cursor上的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以使其自动。

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

支持IE中伪元素上的光标

1 个答案: