Question

我有一个cursor: pointer;的元素，并希望其:after伪元素具有cursor: default;（正常的鼠标箭头）。

.one {
  display: inline-block;
  padding: 0;
  margin: 4px;
  color: #FFF;
  font-size: 14px;
  background: red;
}

.two {
  cursor: pointer;
}

.two:after {
  content: "\2027";
  padding: 0 5px;
  background: aqua;
  color: #000;
  cursor: default;
}

<div class="one">
  <div class="two">
    Text
  </div>
</div>

但无论我在cursor伪元素中设置:after，它始终会显示pointer。

Here 是问题的小提琴

我找到的所有SO帖子都没有提供问题的解决方案。

编辑＃1

根据评论，这可能是仅限Safari的问题。在Chrome中测试过，一切都很好。

Answer 1

这似乎是Safari中的一个已知问题，其他人也有这个问题。

你可以做的是，将你的“两个”类的内容放在另一个html标签中，然后在这些标签上应用样式。像这样https://jsfiddle.net/cornelraiu/L5pyr342/1/：

HTML：

<div class="one">
    <div class="two">
        <span class="pointer">
            Text
        </span>
    </div>
</div>

CSS：

.one {
    display: inline-block;
    padding: 0;
    margin: 4px;
    color: #FFF;
    font-size: 14px;
    background: red;
}

.pointer {
    cursor: pointer;
}
.two:after {
    content: "\2027";
    padding: 0 5px;
    background: aqua;
    color: #000;
}

我知道这是一个“黑客”，但它适用于所有浏览器。

编辑：这里似乎有一个相同问题的答案，但是在旧版本的Chrome上仍然出现在较新版本的Safari上：cursor: pointer doesn't work on :after element?以与我相同的方式解决：）

CSS - 元素上的指针，但默认光标（箭头）上：之后？

1 个答案: