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.

Answer 1

一种解决方案是添加cursor:text到父p元素.(例)

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链接颜色的值.这样做,如果它发生改变,它将匹配父元素的颜色......就像这样.