CSS：如何将<a>标签样式设置成普通文本？

Question

如何将锚标签样式设置为与纯文本完全相同？例如，我有以下代码：

<p> Here is some text and here is a 
   <a class='no-link' href="http://www.example.com" >link</a></p>

我目前尝试过的方法是：

.no-link{
  pointer-events: none;
  cursor: text;
  text-decoration: none;
  color: black;
} 

然而，使用这种样式时，当你将鼠标悬停在“链接”文本上时，仍然会显示默认的光标（即箭头），而不是在<p>标签中的其他文本上出现的“文本”光标。我如何使所有文本都具有文本光标，并且仍然保持链接不可点击？

如果可能的话，我想避免使用jQuery，甚至干脆不用JavaScript。

- rmacqueen

---

您正在使用锚标签，但它不应该看起来像一个链接，也不应该可点击？当然我必须问为什么您首先要使用锚标签... 如果无法避免使用，您可以通过使用 .no-link:hover{...} 解决问题，它将在鼠标悬停在任何具有 no-link 类的元素上时应用样式。 - mowwwalker

你能为我们创建一个 JSFiddle 吗？ - Austin Brunkhorst

似乎pointer-events正在退出历史舞台，至少在Chrome浏览器中是这样的：https://code.google.com/p/chromium/issues/detail?id=162757#c64和http://lists.w3.org/Archives/Public/public-pointer-events/2014JulSep/0051.html - ralph.m

@mowwwalker 我知道这似乎很奇怪，但我需要它们成为锚点标签，因为我希望以后能够轻松地使它们可点击，而不必重写DOM的部分。选择器.no-link:hover{}只是比我在原帖中提到的那个更具体的选择器，所以也存在同样的问题。 - rmacqueen

Answer 1

一种解决方法是在父级 p元素中添加cursor:text。 (示例)

p {
    cursor:text;
}
.no-link {
    color:inherit;
    text-decoration:none;
    pointer-events:none;
}

---

另一种不太理想的解决方案是覆盖一个伪元素，从而防止它被点击（示例）。这种解决方案的缺点是段落内的任何内容都不能被点击。因此，如果您想在同一段落元素中使用普通链接，则无法使用此方法。

p:after {
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    cursor:text;
}

顺便提一下，我建议使用值为inherit的链接颜色。这样做的话，如果父元素的颜色发生变化，链接的颜色将会匹配父元素的颜色...就像这个。

- Josh Crozier